vue3中如何获取子组件的数据或调用其方法
直接使用的方式,父组件是获取不到子组件的属性和方法的
·
vue3中如何获取子组件的数据或调用其方法
根据vue2的经验我们知道,父组件直接调用子组件的属性或方法需要通过this.$refs.XXX来实现,vue3同样是通过ref属性来获取子组件的属性或方法,只不过写法不同,官方文档的写法如下:
父组件
<script setup>
import { ref, onMounted } from 'vue'
// 声明一个 ref 来存放该元素的引用
// 必须和模板 ref 同名
const input = ref(null)
onMounted(() => {
input.value.focus()
})
</script>
<template>
<input ref="input" />
</template>
注意
1.如果不使用 < script setup>,需确保从 setup() 返回 ref
2.只可以在组件挂载后才能访问 ref
只要我们细心观察就会发现,文档的示例使用的都是setup(),而不是< script setup>
在日常使用中可能我们并不会感知到有什么区别,
但是在这里直接使用< sctipt setup>的方式,父组件是获取不到子组件的属性和方法的,这是为什么呢?
在官方文档的 组件上的 ref部分对此有详细的解释
所以在子组件中我们需要使用defineExpose方法,将需要被调用的属性或者方法暴露出去,这样父组件就能正常访问到了,如下是官方文档的示例:
<script setup>
import { ref } from 'vue'
const a = 1
const b = ref(2)
defineExpose({
a,
b
})
</script>
更多推荐
所有评论(0)