当前位置：首页 > article >正文

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

article 2025/1/10 12:43:37

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

//this.$refs.ref属性名.子组件数据
//this.$refs.ref属性名.子组件方法
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.$refs.ref属性名.
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")
     }
   }
  }