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

小矶鹬

已于 2023-03-27 11:12:10 修改

阅读量2.1k

点赞数

分类专栏： VUE 文章标签： vue.js

于 2023-03-27 11:06:36 首次发布

本文链接：https://blog.csdn.net/qq_22472619/article/details/129791070

版权

VUE 专栏收录该内容

18 篇文章 1 订阅

订阅专栏

文章介绍了在Vue.js应用中如何通过this.$refs访问注册了ref属性的DOM元素或子组件实例，从而实现对子组件数据的调用和方法的触发。示例展示了在父组件中如何调用子组件的data和方法。

摘要由CSDN通过智能技术生成

持有注册过 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")
     }
   }
  }