侧边栏壁纸
博主头像
码森林博主等级

一起走进码森林,享受编程的乐趣,发现科技的魅力,创造智能的未来!

  • 累计撰写 146 篇文章
  • 累计创建 74 个标签
  • 累计收到 4 条评论

目 录CONTENT

文章目录

Vue3 | setup中父组件通过Ref调用子组件的方法

码森林
2023-04-07 / 0 评论 / 0 点赞 / 491 阅读 / 485 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2023-04-07,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

在 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 的泛型可以指定anyInstanceType<typeof Children>

<script setup>中调用

父组件

<template>
	<div>
        我是父组件
        <children ref="childrenRef" />
        <button @click="handleChildren1">触发子组件1</button>
        <button @click="handleChildren2">触发子组件2</button>
    </div>
</template>

<script setup lang="ts">
    import { ref } from 'vue'
    import Children from './components/Children.vue';
    const childrenRef = ref<InstanceType<typeof Children>>();
    const handleChildren1 = () => childrenRef.value?.isChildren();
    const handleChildren2 = () => childrenRef.value?.isChildren2();
</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>

<script setup>中调用和setup()钩子函数中调用不同的是:子组件中要通过defineExpose将方法暴露给父组件。

官网说明

https://cn.vuejs.org/api/sfc-script-setup.html#useslots-useattrs

0

评论区