一项栏、傳值并直接操作
問題：如果對應(yīng)組件中沒有該屬性或事件就會報(bào)錯
<!--父組件-->
<template>
<div>
老爸：￥{{parentNum}} <button @click="papa()">老爸給兒砸零花錢</button>
<!--ref 獲取子組件的信息 :parent 自定義屬性萧芙，將父組件暴露給子組件-->
<Child ref="son" :parent="this"/>
</div>
</template>
<script>
import Child from './child';
export default {
name: 'parent',
components: { Child },
data(){
return{
parentNum: 100
}
},
methods: {
papa(){
this.$refs.son.childNum++;
}
}
}
</script>
<!--子組件-->
<template>
<div>
兒砸：￥{{childNum}} <button @click="zaza()">兒砸管老爸要零花錢</button>
</div>
</template>
<script>
export default {
name: 'child',
props: ['parent'], //接收父組件傳來的值
data(){
return{
childNum: 0
}
},
methods: {
zaza(){
this.parent.parentNum--;
}
}
}
</script>
二院刁、emit / on
即使對應(yīng)組件中沒有該屬性或事件翔始，也不會報(bào)錯
//組件發(fā)送方
<Child ref="son"/>
methods: {
change(){
this.$refs.son.$emit('onename',7);
}
}
//組件接收方
created(){
this.$on('onename',num=>{
alert(num);
})
},
兄弟組件通信
一級一級找（孫子——老大——爺爺——老二—— 孫女）彪置，然后用父子組件通信的方式
孫子——中央事件總線——孫女
在外部新建一個js文件（Bus.js）
import Vue from 'Vue';
export default new Vue();
組件兒子
<div @click="send"></div>
import bus from '@/components/Bus'; // 引入中央事件總線
methods: {
send() {
bus.$emit('info','erzi的info'); //觸發(fā)事件
}
}
組件女兒
import bus from '@/components/Bus'; // 引入中央事件總線
methods: {
send() {
bus.$on('info',function(msg){
console.log("接收到："+msg);
});
}
}
組件通信
vuex
