Vue3.0如何ref调用子组件的变量和方法

github

Child子组件中用ref定义出标识，setup函数中定义变量child

注意：在setup中定义的变量名要与子组件中的ref标识保持一致

<script setup>
import { ref, onMounted } from 'vue'
import Child from './Child.vue'

const child = ref(null)

onMounted(() => {
  // child.value 是 <Child /> 组件的实例
})
</script>

<template>
  <Child ref="child" />
</template>

为什么const child = ref(null) 赋值为null呢？这是因为setup（）执行要比onMounted（）函数要早，所以在setup函数中它是未定义的，你需要赋null给它。

在onMounted（）生命周期函数中

// child.value 是 <Child /> 组件的实例
onMounted(() => {
  child.value.name  // 引用子组件的name变量
  child.value.run() // 调用子组件的run()方法
})

 在其他地方使用nextTick钩子

import { nextTick } from "vue";

// 在nextTick函数中，此时DOM已挂载完毕
nextTick(() => {
  child.value.name  // 引用子组件变量
  child.value.run()  // 调用子组件方法
})

注意：子组件的变量与方法，是在语法糖<script setup> 的组件中定义的，那么上述使用还是报错（无法找打子组件的变量和方法） 

这是因为使用了 <script setup> 的组件是默认私有的：一个父组件无法访问到一个使用了 <script setup> 的子组件中的任何东西。

那么如何解决呢？

子组件在其中通过 defineExpose 宏显式暴露

<script setup>
import { ref } from 'vue'

// 变量
const a = 1
const b = ref(2)
// 方法
const run = () => {
  console.log("running")
}

defineExpose({
  a,
  b,
  run
})
</script>

 值得注意的是，需要使用defineExpose暴露的变量与方法，必须声明在defineExpose宏前面，否则会报错【找不到需要导出的变量/方法】