vue3.4父组件调用子组件方法和子组件调用父组件方法

最新推荐文章于 2024-07-19 14:16:29 发布

Y_Hg

最新推荐文章于 2024-07-19 14:16:29 发布

阅读量100

点赞数 2

分类专栏：前端文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/bushiaaa/article/details/140214566

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

vue3子组件调用父组件的方法
1. 父组件中以@参数的形式将方法传递给子组件
2. 子组件引入defineEmits，声明传递过来的属性名
3. 使用时以emits(‘***’)

// 父组件
<script steup >
    import Child from '/~~~~'
	function submit(){
        console.log('父组件的submit')
    }
</script>
<template>
	<Child @childM="submit"></Child>
</template>

// 子组件
<script steup >
    import Child from '/~~~~'
    import {defineEmits, onMounted} from 'vue'
	const emits = defineEmits(['childM'])
    onMounted(() => {
        //使用的时候用以下方法调用即可
        emits('childM')
    })
</script>
<template>
	<Child @childM="submit"></Child>
</template>

vue3父组件调用子组件的方法
1. 子组件中引入defineExpose
2. 子组件中暴露需要给父组件的方法
3. 父组件在使用子组件时拿到它的ref
4. 通过childDom.value.childFun()调用

// 父组件
<script steup >
    import Child from '/~~~~'
	import {onMounted} from 'vue'
    // 注意！！！！！一定要定义一下
    const ChildDom = ref(null);
    onMounted() {
        // 使用的时候调用就行了
        ChildDom.value.childFun();
    }
</script>
<template>
	<Child ref="ChildDom"></Child>
</template>

// 子组件
<script steup >
    import {defineExpose} from 'vue'
    function childFun() {
        console.log('子组件childFun调用了！')
    }
    defineExpose({
        childFun
    })
</script>
<template>
	<Child @childM="submit"></Child>
</template>