vue3?setup語法糖下父組件如何調(diào)用子組件

更新時間：2024年03月04日 11:11:49 作者：左直拳

這篇文章主要介紹了vue3?setup語法糖下父組件如何調(diào)用子組件問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

vue3 setup語法糖下父組件調(diào)用子組件

vue3下，父組件調(diào)用子組件的方法，如果使用了<script setup> 這種寫法，那么子組件方法需要采用defineExpose()進(jìn)行修飾，才能被外界調(diào)用。

上代碼：

1、子組件

_pop.vue：

<template>
	。。。
</template>

<script setup>
	import { defineExpose } from "vue";
	
	const popIt = () => {
		。。。
	};
	defineExpose({ popIt });
</script>

2、父組件

<template>
	<pop pTitle="hehe" ref="pop1"></pop>
</template>

<script setup>
	import pop from "./_pop";

	const pop1 = ref();
	pop1.value.popIt();
</script>

vue3 父子組件相互調(diào)用

下面演示均為使用 setup 語法糖的情況！

參考網(wǎng)址：https://cn.vuejs.org/api/sfc-script-setup.html#defineexpose

父組件調(diào)用子組件方法

子組件需要使用defineExpose對外暴露方法，父組件才可以調(diào)用！

1.子組件

<template>
	<div>我是子組件</div>
</template>
 
<script lang="ts" setup>
	// 第一步：定義子組件的方法
	const hello = (str: string) => {
		console.log('子組件的hello方法執(zhí)行了--' + str)
	}
	// 第二部：暴露方法
	defineExpose({
		hello
	})
</script>

2.父組件

<template>
	<button @click="getChild">觸發(fā)子組件方法</button>
	<!-- 一：定義 ref -->
	<Child ref="childRef"></Child>
</template>
 
<script lang="ts" setup>
	import { ref } from 'vue';
	import Child from '../../components/child.vue';
 
	// 二：定義與 ref 同名變量
	const childRef = ref <any> ()
 
	// 三、函數(shù)
	const getChild = () => {
		// 調(diào)用子組件的方法或者變量，通過value
		childRef.value.hello("hello world！");
	}
</script>

3.測試結(jié)果

子組件調(diào)用父組件方法

1.父組件

<template>
	<Child @sayHello="handle"></Child>
</template>
 
<script lang="ts" setup>
	import Child from '../../components/child.vue';
 
	const handle = () => {
		console.log('子組件調(diào)用了父組件的方法')
	}
</script>

2.子組件

<template>
	<view>我是子組件</view>
	<button @click="say">調(diào)用父組件的方法</button>
</template>
 
<script lang="ts" setup>
	const emit = defineEmits(["sayHello"])
 
	const say = () => {
		emit('sayHello')
	}
</script>

3.測試結(jié)果