vue3 setup中父组件通过Ref调用子组件的方法(实例代码)

目录 在setup()钩子函数中调用 在<srcipt setup>中调用

在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父组件调用子组件内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

查看更多关于vue3 setup中父组件通过Ref调用子组件的方法(实例代码)的详细内容...