侧边栏壁纸
  • 累计撰写 198 篇文章
  • 累计创建 105 个标签
  • 累计收到 36 条评论
vue

vue3中父组件如何调用子组件中的方法

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

在vue2中:

我们通常使用this.$refs.childNode.clickButton()调用子组件方法。
子组件上定义ref="refName",父组件的方法中用this.$refs.refName.method去调用子组件方法

1. 子组件中的方法mychild

 show() {
     console.log('子组件的show方法被调用了')      
},

2. 父组件

<template>
    <my-child ref="getRef" type="submit" />
</template>
<script>
getChild(){
   console.log('父组件的getChild被调用了')
   this.$refs.uploadRef.show();
},
</script>

此时就可以看到信息

20220331_101221.png

vue3中

1.父组件

<template>
    <div class="parent">
        <button @click="getChild">触发子组件方法</button>
        <!-- 1. 定义ref -->
        <child ref="childRef"></child>
    </div>
</template>
<script lang="ts" stup>
    import { defineComponent, ref } from "vue";
    import child from "@/components/child.vue";
 
    // 2. 定义与ref同名变量
    const childRef = ref<any>();
    const getChild = () => {
        childRef.value.childFun();
    }
</script>

2.1 子组件 scrip setup 写法

其实和vue2差不多,最重要一点就是要在子组件中将父组件需要调用的方法,使用defineExpose({myfunc})进行导出,才能调用,不然会报错.

<template>
    <div class="child">
    </div>
</template>
<script lang="ts" stup>
 
 const childFun = () => {
     console.log('已触发组件方法');
 }
 
 //关键点 把 方法暴露给父组件
 defineExpose({open})
 
</script>

2.2子组件 defineComponent 写法

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

评论区