这次给大家带来vue综合组件通信使用案例，vue综合组件通信使用的注意事项有哪些，下面就是实战案例，一起来看一下。

本文实例为大家分享了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中数组

子组件 和 父组件通信：

        
  
{{msg}}
      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: `      
        
待做事项
                Add             `  })//  列表组件  Vue.component("todolist",{//    保存传递来的用户输入的数据    data:function(){      return{        inputList:[]      }    },    beforeMount:function(){//      触发绑定//      msg就是事件触发后传递过来的数据      //var that = this;      bus.$on("addEvent",(msg)=>{//        保存到数组inputList中        this.inputList.push (msg) ;      })    },    template: `    
      

`// 出现警告，加下标，提高列表渲染 })// item组件 Vue.component("todoitem",{// props子组件获取父组件的数据，将todolist中的内容以及内容的下标获取 props:["content","myIndex"], methods:{// 通过下标删除 deleteList:function(){ this.$parent.inputList.splice(this.myIndex,1); } }, template: `

delete {{content}}

` })//根组件 Vue.component("todobox",{ template:`

` }) new Vue({ el: "#container", data: { msg: "Hello Vue" } })

登录后复制

相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！

推荐阅读：

以上就是vue综合组件通信使用案例的详细内容，更多请关注【创想鸟】其它相关文章！