Vue3中父子组件相互触发方法

约定不等于承诺〃 2022-09-08 05:57 147阅读 0赞

1. 父组件触发子组件的方法

父组件代码如下：

<template>
        <div class="parent">
            <button @click="getChild">触发子组件方法</button>
            
            <child ref="childRef"></child>
        </div>
    </template>
    <script lang="ts">
    import { defineComponent, ref } from "vue";
    import child from "@/components/child.vue";
    
    export default defineComponent({
        setup() {
            // 2. 定义与ref同名变量
            const childRef = ref<any>();
            const getChild = () => {
                // 3. 调用子组件的方法或者变量，通过value
                childRef.value.doSomething();
            }
            return {
                // 4. return 该变量
                childRef,
                getChild
            };
        },
        components: {
            child,
    
        },
    });
    </script>

子组件代码如下：

<template>
        <div class="child">
        </div>
    </template>
    <script lang="ts">
    import { defineComponent } from "vue";
    
    
    export default defineComponent({
        setup() {
            // 1. 定义子组件的方法
            const doSomething = () => {
                console.log('已触发组件方法');
            }
            return {
                // 2. return 该方法
                doSomething
            };
        },
       
    });
    </script>

效果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBAV2ViX-mYv-WHrw_size_14_color_FFFFFF_t_70_g_se_x_16][]

2.子组件触发父组件的方法

父组件代码如下：

<template>
        <div class="parent">
            
            <child @postData="postData"></child>
        </div>
    </template>
    <script lang="ts">
    import { defineComponent } from "vue";
    import child from "@/components/child.vue";
    
    export default defineComponent({
        setup() {
            // 2. 定义方法
            const postData = () => {
                console.log('触发父组件的方法');
            }
            return {
                // 3. return 出来
                postData
            };
        },
        components: {
            child,
        },
    });
    </script>

子组件代码如下：

<template>
        <div class="child">
        </div>
    </template>
    <script lang="ts">
    import { defineComponent, onMounted } from "vue";
    
    
    export default defineComponent({
        setup(props, context) {
            const doSomething = () => {
                // 与vue2不同的是要通过 context 来找到 emit
                context.emit('postData');
            }
            onMounted(() => {
                doSomething();
            })
            return {
            };
        },
       
    });
    </script>

效果如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBAV2ViX-mYv-WHrw_size_15_color_FFFFFF_t_70_g_se_x_16][]

Ps：1. 该测试环境为 vue3 + Ts

2. 如果需要传值和 vue2 类似

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBAV2ViX-mYv-WHrw_size_14_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/1fcba954b73b43a1b031ea3b260e38c7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBAV2ViX-mYv-WHrw_size_15_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/0e833a6e5be144f69f9a7b9dbc730c4c.png