Vue3 父组件调用子组件方法($refs 在setup()、<script setup> 中使用)
-
Vue3 defineProps、defineEmits、defineExpose 的作用,看了这篇在看下文
Vue3
部分会更容易理解。 -
在
vue2
中ref
被用来获取对应的子元素,然后调用子元素内部的方法。<template> <!-- 子组件 --> <TestComponent ref="TestComponent"></TestComponent> </template> <script> // 导入子组件 import TestComponent from './TestComponent' export default { components: { TestComponent }, mounted () { // 调用子组件方法 this.$refs.TestComponent.show() } } </script>
-
在
Vue3
setup () {}
中使用ref
,如何获取到子元素,并调用方法:<template> <!-- 子组件 --> <TestComponent ref="RefTestComponent"></TestComponent> </template> <script> // 导入子组件 import TestComponent from './TestComponent' import { ref } from 'vue' import { nextTick } from 'process' export default { components: { TestComponent }, setup () { // 定义一个对象关联上子组件的 ref 值(注意:这里的属性名必须跟子组件定义的 ref 值一模一样,否者会关联失效) const RefTestComponent = ref(null) // 延迟使用,因为还没有返回跟挂载 nextTick(() => { RefTestComponent.value.show() }) // 返回 return { RefTestComponent } } } </script>
-
在
Vue3
<script setup>
中使用ref
,如何获取到子元素,并调用方法<template> <!-- 子组件 --> <TestComponent ref="RefTestComponent"></TestComponent> </template> <script setup> // 导入子组件 import TestComponent from './TestComponent' import { ref } from 'vue' import { nextTick } from 'process' // 定义一个对象关联上子组件的 ref 值(注意:这里的属性名必须跟子组件定义的 ref 值一模一样,否者会关联失效) const RefTestComponent = ref(null) // 延迟使用,因为还没挂载 nextTick(() => { RefTestComponent.value.show() }) </script>
转载自:https://juejin.cn/post/7126720661594210335