父訪問(wèn)子，說(shuō)完了，該輪到子訪問(wèn)父了，老樣子，

第一種：在子組件指定函數(shù)內(nèi)使用$parent訪問(wèn)父組件

<template id="son">//實(shí)例的子組件
?<div>
? ?<h2>{{message}}</h2>
? ?<subcpn></subcpn>
?</div>
</template>

<template id="sonson">//子組件的子組件
?<div>
? ?<h2>我是子組件的子組件</h2>
? ?<button @click="btnClick">最小輩</button>//子組件的子組件點(diǎn)擊事件，調(diào)用函數(shù)，通過(guò)這個(gè)函數(shù)作為訪問(wèn)父組件的載體
?</div>
</template>

<div id="app">
?<cpn></cpn>
</div>

const app=new Vue({
? ?el:document.querySelector('#app'),
? ?data:{
? ?num1:0,
? ?num2:1
?}, components:{
? ? ?cpn:{ //cpn是實(shí)例的子組件
? ? ? ?template:'#son',
? ? ? ?data(){
? ? ? ? ?return {
? ? ? ? ? ?message:'子組件中的數(shù)據(jù)'
? ? ? ? ?}
? ? ? ?},
? ? ? ?components:{
? ? ? ? ?subcpn:{? //subcpn是cpn組件的子組件，并且subcpn只能在cpn的模板里面應(yīng)用
? ? ? ? ? ?template: '#sonson',
? ? ? ? ? ?methods:{
? ? ? ? ? ? ?btnClick(){
? ? ? ? ? ? ? ?console.log(this.$parent);
? ? ? ? ? ? ?}
? ? ? ? ? ?}
? ? ? ? ?}
? ? ? ?}
? ? ?}
?},
?methods: {

?}

})

到此為止：效果如下

subcpn:{
?template: '#sonson',
?methods:{
? ?btnClick(){
? ? ?console.log(this.$parent.message);
? ?}
?}
}

第二種：在子組件指定函數(shù)內(nèi)使用$root訪問(wèn)根組件

btnClick(){
?console.log(this.$root.num1);
}