Heim > Artikel > Web-Frontend > Vue umfassender Anwendungsfall für Komponentenkommunikation
Dieses Mal werde ich Ihnen einen Anwendungsfall für die umfassende Komponentenkommunikation von Vue vorstellen. Was sind die Vorsichtsmaßnahmen bei der Verwendung der umfassenden Komponentenkommunikation von Vue?
Das Beispiel in diesem Artikel teilt die Kommunikation zwischen den umfassenden Vue-Komponenten als Referenz. Der spezifische Inhalt ist wie folgt
Implementieren Sie eine ToDoList.
①Schließen Sie die Erstellung und Verwendung aller Komponenten ab
②hinzufügen
Wenn auf die Schaltfläche „Hinzufügen“ geklickt wird, wird der vom Benutzer eingegebene Inhalt (todoinput) in (todolist)
angezeigt
Kerncode: Kommunikation zwischen Geschwisterkomponenten
Schritt 1: var bus = new Vue()
Schritt 2: In der Komponente bereit zum Datenempfang
bus.$on('addEvent',function(){ })
Schritt 3: Ereignis auslösen
bus.$emit('addEvent',123)
Rendern Sie die Elemente des array in todolist in jedem Span-Tag von todoitem. (Vater-Kind-Komponentenkommunikation)
Wenn im Todo-Element auf die Schaltfläche „Löschen“ geklickt wird, wird das Todo-Element gelöscht, da die Anzahl der Todo-Elemente vom Array
in der Todo-Liste abhängt Kommunikation zwischen untergeordneter Komponente und übergeordneter Komponente:
<!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>
Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website.
Empfohlene Lektüre:
Das obige ist der detaillierte Inhalt vonVue umfassender Anwendungsfall für Komponentenkommunikation. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!