vue中的$refs(父访子)——访问子组件数据+方法

vue中的$refs(父访子)——访问子组件数据+方法

持有注册过 ref 属性的所有 DOM 元素和组件实例

//this.$f属性名.子组件数据
//this.$f属性名.子组件方法
console.log(this.$refs.twoChildrenRef.name)
console.log(this.$refs.twoChildrenRef.showMessage())

父组件：
  <div id="app">
    <cpn></cpn>
    <cpn ref="twoChildrenRef"></cpn>
    <cpn></cpn>
    <button @click="btnClick">获取子组件的对象</button>
  </div>
<script>
    const app=new Vue({
      el:"#app",
      components:{cpn},
      methods:{
        btnClick(){
          //方式二、this.$f属性名.
          console.log(this.$refs.twoChildrenRef.name)----调用子组件数据
          console.log(this.$refs.twoChildrenRef.showMessage())----调用子组件方法
        }
      }
    })
</script>

子组件：

<template id="cpn">
  <div>我是子组件</div>
</template>
<script>
 const cpn={
   template:`#cpn`,
   data(){
     return {
        name:"我是子组件的数据"
     }
   },
   methods:{
     showMessage(){
        console.log("子方法showMessage")
     }
   }
  }