2018年11月08日 關於Vue的父子通訊 and 子父通訊 and 任意及平行元件間通訊的學習
阿新 • • 發佈：2018-11-12
1、父子通訊
//在html中的相關程式碼
<body>
<div id="app">
<alert change_alert="再見"></alert> //如果我們想要點選按鈕的時候彈出的內容時change_alert中的“再見”的話，那麼我們要在vue.js中進行相關的操作
</div>
</body>
//在vue.js中的相關程式碼 Vue.component('alert',{ //定義了一個<alert>元件 template:'<button @click="on_click">點選我</button>', porps:['change_alert'], //Vue中給我提供這樣的方法porps methods:{ on_click:function(){ alert(this.change_alert); }, } }); var app = new Vue({ //作用域，沒有作用域我們定義的元件也無法顯示 el:'#app', });
————————我是分隔符————————
//在html中的相關程式碼
<body>
<div id="app">
<username username = "張三三"></username>
</div>
</body>
//在vue.js中的相關程式碼 Vue.component('username',{ //定義了一個<alert>元件 template:'<a :herf="\'http=user/\'+username" @click="on_click">@{{username}}</a>', //這裡我們給a標記動態傳入username，只要修改html中的username就可以，在給a標記新增herf的時候要注意地址中單雙引號的使用，這裡就使用了轉義字元。 porps:['username'], //Vue中給我提供這樣的方法porps methods:{ on_click:function(){ alert(this.username); }, } }); var app = new Vue({ //作用域，沒有作用域我們定義的元件也無法顯示 el:'#app', });
子父通訊
//在html中的相關程式碼
<body>
<div id="app">
<balance></balance>
</div>
</body>
//在vue.js中的相關程式碼 Vue.component('balance',{ template:` <div> <show @show-balance="show_balance = true"></show> <div v-if="show_balance">YES!</div> </div>`, data:function(){ return{ show_balance: false, } }, }); Vue.component('show',{ template:'<button @click="on_click()">你喜歡WEB前端麼？</button>', methods:{ on_click:function(){ return this.$emit('show-balance',{a:1,b:2}); } } }); var app = new Vue({ el:'#app', });
如果想要傳入引數，可以做一下修改。
Vue.component('balance',{
template:`
<div>
<show @show-balance="show_balance"></show>
<div v-if="show">YES!</div>
</div>`,
methods:{
show_balance:function(data){
this.show = true;
console.log('data',data);
}
},
data:function(){
return{
show: false,
}
},
});
Vue.component('show',{
template:'<button @click="on_click()">你喜歡WEB前端麼？</button>',
methods:{
on_click:function(){
return this.$emit('show-balance',{a:1,b:2});
}
}
});
var app = new Vue({
el:'#app',
});
任意及平行元件間通訊
//在html中的相關程式碼
<div id="app">
<mumu></mumu>
<haha></haha>
</div>
var Event = new Vue();
Vue.component('mumu',{
template:'<div>木木說:<input @keyup="on_change" type="text" v-model="i_said">{{i_said}}</div>',
data:function () {
return{
i_said:'',
}
},
methods:{
on_change:function () {
return Event.$emit('mumu-said-something',this.i_said);
}
},
});
Vue.component('niqiyao',{
template:'<div>哈哈聽到木木說：{{mumu_said}}</div>',
data:function () {
return{
mumu_said:'',
}
},
mounted:function(){
var me = this;
Event.$on('mumu-said-something',function (data) {
me.mumu_said = data;
});
},
});
var app = new Vue({
el:'#app',
});