This time I will bring you a use case of vue comprehensive component communication. What are the precautions when using vue comprehensive component communication. The following is a practical case, let's take a look.
The example in this article shares the communication between vue comprehensive components for your reference. The specific content is as follows
Implement a ToDoList.
①Complete the creation and use of all components
②add
When the add button is clicked, the content entered by the user (todoinput) is displayed in (todolist)
Core code: Communication between sibling components
Step 1: var bus = new Vue()
Step 2: In the component that is ready to receive data
bus.$on('addEvent',function(){ })
Step 3: Trigger event
bus.$emit('addEvent',123)
Render the elements of array in todolist in each span tag of todoitem. (Parent-child component communication)
When you click the delete button in a todoitem, the todoitem will be deleted because the number of todoitem depends on the array
in the todolist. Communication between child component and parent component:
<!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> <p id="container"> <p>{{msg}}</p> <todobox></todobox> </p> <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: ` <p> <h1>待做事项</h1> <input type="text" placeholder="健身" v-model="userInput"/> <button @click="sendInput">Add</button> </p> ` }) // 列表组件 Vue.component("todolist",{ // 保存传递来的用户输入的数据 data:function(){ return{ inputList:[] } }, beforeMount:function(){ // 触发绑定 // msg就是事件触发后传递过来的数据 //var that = this; bus.$on("addEvent",(msg)=>{ // 保存到数组inputList中 this.inputList.push (msg) ; }) }, template: ` <p> <ul> <todoitem v-bind:content="tmp" v-for="(tmp,index) in inputList" v-bind:key="index" v-bind:myIndex="index"></todoitem> </ul> </p> ` // 出现警告,加下标,提高列表渲染 }) // item组件 Vue.component("todoitem",{ // props子组件获取父组件的数据,将todolist中的内容以及内容的下标获取 props:["content","myIndex"], methods:{ // 通过下标删除 deleteList:function(){ this.$parent.inputList.splice(this.myIndex,1); } }, template: ` <p> <li> <button @click="deleteList">delete</button> <span>{{content}}</span> </li> </p> ` }) //根组件 Vue.component("todobox",{ template:` <p> <todoinput></todoinput> <todolist></todolist> </p> ` }) new Vue({ el: "#container", data: { msg: "Hello Vue" } }) </script> </body> </html>
I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!
Recommended reading:
The above is the detailed content of vue comprehensive component communication use case. For more information, please follow other related articles on the PHP Chinese website!