vue综合组件间的通信详解

时间：2021-05-26

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

子组件 和 父组件通信：

<!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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章