Vue从零开始总结30

父访问子，说完了，该轮到子访问父了，老样子，

第一种：在子组件指定函数内使用$parent访问父组件

<template id="son">//实例的子组件
 <div>
   <h2>{{message}}</h2>
   <subcpn></subcpn>
 </div>
</template>

<template id="sonson">//子组件的子组件
 <div>
   <h2>我是子组件的子组件</h2>
   <button @click="btnClick">最小辈</button>//子组件的子组件点击事件，调用函数，通过这个函数作为访问父组件的载体
 </div>
</template>

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

const app=new Vue({
   el:document.querySelector('#app'),
   data:{
   num1:0,
   num2:1
 }, components:{
     cpn:{ //cpn是实例的子组件
       template:'#son',
       data(){
         return {
           message:'子组件中的数据'
         }
       },
       components:{
         subcpn:{  //subcpn是cpn组件的子组件，并且subcpn只能在cpn的模板里面应用
           template: '#sonson',
           methods:{
             btnClick(){
               console.log(this.$parent);
             }
           }
         }
       }
     }
 },
 methods: {

 }

})

到此为止：效果如下

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

第二种：在子组件指定函数内使用$root访问根组件

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