vueコンポーネント通信伝値操作例
2243 ワード
この例では、vueコンポーネントの通信値伝達動作について説明する.皆さんの参考にしてください.具体的には以下の通りです.
親子コンポーネント通信:
サブアセンブリ
親コンポーネント
兄弟コンポーネント通信:
main,jsに追加
アセンブリ内
兄弟1コンポーネント:
兄弟2コンポーネント:
本文で述べたようにみんなにvue.jsプログラム設計が役立ちます.
親子コンポーネント通信:
サブアセンブリ
{{parentMessage}}
export default{
props: ['parentMessage'],
mounted() {
// this.$emit('childEvent');
},
methods:{
alerrt(){
this.$emit('childEvent',{name:'zhangsan',age:10 });
}
}
}
親コンポーネント
import ChildOne from './ChildOne'
export default{
components: {
ChildOne
},
methods: {
parentMethod({name,age}) {
alert(this.parentMessage);
console.log(this.parentMessage,name,age);
},
extendTest() {
console.log('333');
var Extend = Vue.extend({
template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>',
data: function () {
return {
firstName: 'Walter',
lastName: 'White',
alias: 'Heisenberg'
}
}
})
new Extend().$mount('#extend')
},
},
data () {
return {
parentMessage: ' aaaa'
}
}
}
兄弟コンポーネント通信:
main,jsに追加
import Vue from 'vue'
window.eventBus = new Vue();
アセンブリ内
兄弟1コンポーネント:
window.eventBus.$emit(' ', { : });
兄弟2コンポーネント:
window.eventBus.$on('grouprecording', =>{
//
})
本文で述べたようにみんなにvue.jsプログラム設計が役立ちます.