ホームページ > 記事 > ウェブフロントエンド > vue の包括的なコンポーネント通信の使用例
vue の包括的なコンポーネント通信の使用例
- php中世界最好的语言オリジナル
- 2018-04-16 09:19:011206ブラウズ
今回は 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 サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：vueルーティングネストSPAの実装方法次の記事：vueルーティングネストSPAの実装方法