vue3 setup中父组件通过Ref调用子组件的方法(实例代码)
作者：虎落鹰背
这篇文章主要介绍了vue3 setup中父组件通过Ref调用子组件的方法，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
在setup()钩子函数中调用
父组件
<template>
<div>
我是父组件
<children ref="childrenRef" />
<button @click="handleChildren">触发子组件</button>
</div>
</template>
<script lang="ts">
import { ref, defineComponent } from 'vue'
import Children from './components/Children.vue';
export default defineComponent({
components: { Children }
setup() {
// ref的泛型除了指定any外 还可以指定<InstanceType<typeof Children>>
const childrenRef = ref<any>();
const handleChildren = () => childrenRef.value.isChildren();
return {
childrenRef,
handleChildren
}
},
})
</script>
子组件：
<template>
<div>
我是子组件
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
setup() {
const isChildren = () => {
console.log("我是子组件");
}
return {
isChildren,
}
}
})
</script>
如果是在setup()钩子函数中使用，父组件通过ref获取到子组件实例后，直接.value.函数名即可调用子组件所定义的函数。其中ref的泛型可以指定any和InstanceType<typeof Children>
在<srcipt setup>中调用
父组件
<template>
<div>
我是子组件
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
setup() {
const isChildren = () => {
console.log("我是子组件");
}
return {
isChildren,
}
}
})
</script>
子组件
<template>
<div>
我是子组件
</div>
</template>
<script setup lang="ts">
import { defineExpose } from 'vue';
const isChildren = () => {
console.log("我是子组件的第一个方法");
}
const isChildren2 = () => {
console.log("我是子组件的第二个方法");
}
defineExpose({ isChildren, isChildren2 })
</script>
在<srcipt setup>中调用和setup()钩子函数中调用不同的是：子组件中要通过defineExpose将方法暴露给父组件。
到此这篇关于vue3 setup中父组件通过Ref调用子组件的方法的文章就介绍到这了,更多相关vue3 setup父组件调用子组件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！