vue如何获取子组件的实例，方法和数据

SanMu三木

已于 2023-03-24 14:34:44 修改

阅读量9.5k

点赞数 2

文章标签： vue.js html javascript 前端 html5 Powered by 金山文档

于 2023-01-13 11:46:33 首次发布

本文链接：https://blog.csdn.net/m0_60322614/article/details/128671985

版权

利用ref指向获取子元素实例

ref放在普通标签上，拿到的就是普通标签本身

ref放在子组件上，拿到的就是子组件对象

-通过这种方式实现子传父（this.$refs.mychild.text）

-通过这种方式实现父传子（调用子组件方法传参数）

<template>
  <div>
    <son ref="son" />
  </div>
</template>

<script>
import son from '@/components/SonFile.vue'

export default {
  components: {
    son
  },
  mounted() {
      console.log(this.$refs.son,"我是子组件的实例")
  },
}
</script>