快捷導(dǎo)航

vue3?setup中父組件通過Ref調(diào)用子組件的方法(實例代碼)

更新時間：2022年08月17日 09:53:17 作者：虎落鷹背

這篇文章主要介紹了vue3?setup中父組件通過Ref調(diào)用子組件的方法，本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下

在setup()鉤子函數(shù)中調(diào)用

父組件

<template>
	<div>
        我是父組件
        <children ref="childrenRef" />
        <button @click="handleChildren">觸發(fā)子組件</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()鉤子函數(shù)中使用，父組件通過ref獲取到子組件實例后，直接.value.函數(shù)名即可調(diào)用子組件所定義的函數(shù)。其中ref的泛型可以指定any和InstanceType<typeof Children>

在<srcipt setup>中調(diào)用

父組件

<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>中調(diào)用和setup()鉤子函數(shù)中調(diào)用不同的是：子組件中要通過defineExpose將方法暴露給父組件。

??官網(wǎng)說明地址

到此這篇關(guān)于vue3 setup中父組件通過Ref調(diào)用子組件的方法的文章就介紹到這了,更多相關(guān)vue3 setup父組件調(diào)用子組件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: