Vue从零开始总结29

父传子实现了，那么接下来就是父访问子了。

在父组件中使用指定函数，

第一种方法：在指定函数内使用$children获取子组件中的内容

代码如下：

<template id="son">
 <div> <h2>{{message}}</h2></div>
</template>

<div id="app">
<cpn></cpn>
 <button @click="btnClick">获取</button>
</div>

const app=new Vue({
   el:document.querySelector('#app'),
   data:{
   num1:0,
   num2:1
 }, components:{
     cpn:{
       template:'#son',
       data(){
         return {
           message:'子组件中的数据'
         }
       }
     }
 },
 methods: {
   btnClick(){
     console.log(this.$children);
   }
 }

})

我们发现通过$children获取到的是数组。

当使用多个cpn，相当于创建了多个不同的实例，这些实例以数组的形式存储在VueComponent里，下标从0开始，uid从1开始

<div id="app">
<cpn></cpn>
<cpn></cpn>
<cpn></cpn>
 <button @click="btnClick">获取</button>
</div>

btnClick(){
 for (let x of this.$children)
 {
   console.log(x);
 }
}

第二种方法：在指定函数内，使用$refs获取子组件中的数据

@one.当我们未在子组件标签行内指定ref值时

发现获取到的是空对象，里面空空如也

@two.当我们在子组件标签行内指定ref值时

<div id="app">
<cpn ref="a"></cpn>
<cpn ref="b"></cpn>
<cpn ref="c"></cpn>
 <button @click="btnClick">获取</button>
</div>

btnClick(){
 console.log(this.$refs);
}

发现获取到了相应ref值的对象。

那么接下来就可以通过ref值来访问子组件里的数据了

btnClick(){
 console.log(this.$refs.a.message);
}