ホームページ > 記事 > ウェブフロントエンド > vue の包括的なコンポーネント通信の使用例
今回は vue 包括コンポーネント通信のユースケースをお届けします。 vue 包括コンポーネント通信を使用する際の 注意事項 については、以下のとおりです。
この記事の例では、Vue の包括的なコンポーネント間の通信を共有しています。具体的な内容は次のとおりです。 ToDoリストを実装します。①すべてのコンポーネントの作成と使用を完了します
②追加
追加ボタンをクリックすると、(todolist)にユーザーが入力した内容(todoinput)が表示されます コアコード: 兄弟コンポーネント間の通信ステップ 1: varbus = new Vue()
ステップ 2: データを受信するコンポーネントの準備
bus.$on('addEvent',function(){ })ステップ 3: イベントをトリガーする
bus.$emit('addEvent',123)todoitem の各 spa タグで、todolist の
array の要素をレンダリングします。 (親子コンポーネントコミュニケーション)
todoitem の数は todolist の配列に依存するため、todoitem の削除ボタンをクリックすると、todoitem が削除されます 子コンポーネントと親コンポーネント間の通信:<!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>この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。 推奨読書:
以上がvue の包括的なコンポーネント通信の使用例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。