vue综合组件间的通信详解


Posted in Javascript onNovember 06, 2017

本文实例为大家分享了vue综合组件间的通信,供大家参考,具体内容如下

实现一个ToDoList。

①完成所有的组件的创建和使用

②add

点击add按钮时候,将用户输入的内容(todoinput),显示在(todolist)

核心代码:兄弟组件间通信
步骤1:var bus = new Vue()
步骤2:在准备接受数据的组件

bus.$on('addEvent',function(){

})

步骤3:触发事件

bus.$emit('addEvent',123)

将todolist中数组的元素 渲染在todoitem的每一个span标签。(父子组件通信)

③delete

在todoitem中点击delete按钮时,将该todoitem删除,由于todoitem的数量 取决于 todolist中数组

子组件 和 父组件通信:

vue综合组件间的通信详解

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="js/vue.js"></script>
  <script src="js/vue-resource.js"></script>
</head>
<body>
<div id="container">
  <p>{{msg}}</p>
  <todobox></todobox>
</div>
<script>
  <!--兄弟间通信-->
  var bus = new Vue();
//  input组件
  Vue.component("todoinput",{
//    保存用户输入的数据
    data:function(){
      return{
        userInput:""
      }
    },
    methods:{
      sendInput:function(){
//        触发自定义事件,将this.userInput这个传递到todolist
        bus.$emit("addEvent",this.userInput);
        this.userInput = "";
      }
    },
    template: `
      <div>
        <h1>待做事项</h1>
        <input type="text" placeholder="健身" v-model="userInput"/>
        <button @click="sendInput">Add</button>
      </div>

       `
  })
//  列表组件
  Vue.component("todolist",{
//    保存传递来的用户输入的数据
    data:function(){
      return{
        inputList:[]
      }
    },
    beforeMount:function(){
//      触发绑定
//      msg就是事件触发后传递过来的数据
      //var that = this;
      bus.$on("addEvent",(msg)=>{
//        保存到数组inputList中
        this.inputList.push (msg) ;
      })
    },
    template: `
    <div>
      <ul>
        <todoitem v-bind:content="tmp" v-for="(tmp,index) in inputList" v-bind:key="index" v-bind:myIndex="index"></todoitem>
      </ul>
    </div>
       `
//    出现警告,加下标,提高列表渲染
  })
//  item组件
  Vue.component("todoitem",{
//    props子组件获取父组件的数据,将todolist中的内容以及内容的下标获取
    props:["content","myIndex"],
    methods:{
//      通过下标删除
      deleteList:function(){
        this.$parent.inputList.splice(this.myIndex,1);
      }
    },
    template: `
    <div>
      <li>
        <button @click="deleteList">delete</button>
         <span>{{content}}</span>
      </li>
    </div>
       `
  })
//根组件
  Vue.component("todobox",{
    template:`
      <div>
        <todoinput></todoinput>
        <todolist></todolist>
      </div>
    `
  })
  new Vue({
    el: "#container",
    data: {
      msg: "Hello Vue"
    }
  })
</script>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery判断元素是否是隐藏的代码
Apr 24 Javascript
高性能Javascript笔记 数据的存储与访问性能优化
Aug 02 Javascript
多种方法实现JS动态添加事件
Nov 01 Javascript
给事件响应函数传参数的四种方式小结
Dec 05 Javascript
jQuery原型属性和原型方法详解
Jul 07 Javascript
基于jQuery全屏焦点图左右切换插件responsiveslides
Sep 07 Javascript
常用的js验证和数据处理总结
Aug 02 Javascript
React Native实现进度条弹框的示例代码
Jul 17 Javascript
深入理解node.js http模块
Jan 24 Javascript
Vue核心概念Action的总结
Jan 18 Javascript
js图片查看器插件用法示例
Jun 22 Javascript
ant design vue嵌套表格及表格内部编辑的用法说明
Oct 28 Javascript
Angular 4中如何显示内容的CSS样式示例代码
Nov 06 #Javascript
详解基于vue-cli优化的webpack配置
Nov 06 #Javascript
解决option标签selected=&quot;selected&quot;属性失效的问题
Nov 06 #Javascript
js中apply与call简单用法详解
Nov 06 #Javascript
js实现简单数字变动效果
Nov 06 #Javascript
利用百度地图API获取当前位置信息的实例
Nov 06 #Javascript
原生js封装添加class,删除class的实例
Nov 06 #Javascript
You might like
不用GD库生成当前时间的PNG格式图象的程序
2006/10/09 PHP
cache_lite试用
2007/02/14 PHP
Apache下禁止php文件被直接访问的解决方案
2013/04/25 PHP
什么情况下可以不写PHP的闭合标签“?&gt;”
2014/08/28 PHP
PHP实现二维数组按照指定的字段进行排序算法示例
2019/04/23 PHP
asp.net 30分钟掌握无刷新 Repeater
2011/09/16 Javascript
jquery 插件学习(四)
2012/08/06 Javascript
jQuery模拟超链接点击效果代码
2013/04/21 Javascript
js同比例缩放图片的小例子
2013/10/30 Javascript
jQuery客户端分页实例代码
2013/11/18 Javascript
JavaScript Math.ceil() 函数使用介绍
2013/12/11 Javascript
jquery统计用户选中的复选框的个数
2014/06/06 Javascript
js使用removeChild方法动态删除div元素
2014/08/01 Javascript
基于jquery实现图片上传本地预览功能
2016/01/08 Javascript
jQuery simplePage+AJAX plus分页插件用法实例
2016/02/17 Javascript
浅谈regExp的test方法取得的值变化的原因及处理方法
2017/03/01 Javascript
easyui-datagrid特殊字符不能显示的处理方法
2017/04/12 Javascript
Javascript刷新页面的实例
2017/09/23 Javascript
解决vue2.0动态绑定图片src属性值初始化时报错的问题
2018/03/14 Javascript
详解Node使用Puppeteer完成一次复杂的爬虫
2018/04/18 Javascript
vue3.0 CLI - 2.1 -  component 组件入门教程
2018/09/14 Javascript
小程序click-scroll组件设计
2019/06/18 Javascript
js实现单元格拖拽效果
2020/02/10 Javascript
Python实现的简单万年历例子分享
2014/04/25 Python
Python字符串转换成浮点数函数分享
2015/07/24 Python
python smtplib模块自动收发邮件功能(一)
2018/05/22 Python
PYQT5设置textEdit自动滚屏的方法
2019/06/14 Python
使用python实现unix2dos和dos2unix命令的例子
2019/08/13 Python
python opencv实现图片缺陷检测(讲解直方图以及相关系数对比法)
2020/04/07 Python
ASP.NET Core中的配置详解
2021/02/05 Python
用canvas显示验证码的实现
2020/04/10 HTML / CSS
日本热销NO.1胶原蛋白冻:Aishitoto爱希特多
2019/06/20 全球购物
金融行业职业生涯规划范文
2014/01/17 职场文书
干部下基层实施方案
2014/03/14 职场文书
新郎婚礼答谢词
2015/01/04 职场文书
SqlServer: 如何更改表的文件组?(进而改变存储位置)
2021/04/05 SQL Server