关于vue3.2中父组件调用子组件的方法
我们都知道在vue2中父子组件传值直接在父组件调用子组件的元素上添加相应的属性,然后再子组件中的props中调用父组件中的方法。但是在vue3中略有不同,添加了两个新Api defineProps、defineExpose1、首先在父组件中引入并且调用子组件,这里需要注意一下,在vue3中不需要再在components对象中定义组件,直接引入之后直接使用就可以了// 父组件// 引入组件<s
·
我们都知道在vue2中父子组件传值直接在父组件调用子组件的元素上添加相应的属性,然后再在子组件中的props中调用父组件传过来的值即可。
但是在vue3中略有不同,添加了两个新Api defineProps、defineExpose
1、首先在父组件中引入并且调用子组件,这里需要注意一下,在vue3中不需要再在components对象中定义组件,直接引入之后直接使用就可以了
// 父组件
// 引入组件
<script setup>
import DialogAddSwiper from '@/components/DialogAddSwiper.vue'
</script>
<template>
<DialogAddSwiper ref="addGood" :reload="getCarousels" :type="state.type" />
</template>
2、然后在子组件中接收父组件传过来的值
// 子组件
<script setup>
// defineProps 方法的使用
const props = defineProps({
type: String,
reload: Function,
configType: Number
});
</script>
至此,父组件调用子组件的值是没有问题了,但是却无法使用子组件中定义的方法,这时候就需要在子组件中引入一个Api
比如在父组件中使用一个子组件的方法
// 父组件
// 定义了一个addGood 实例
const addGood = ref(null);
// 这里使用了addGood 的open方法,但是这样直接使用是没法使用的
const handleAdd = () => {
state.type = "add";
addGood.value.open();
}
// 这时候就需要在子组件中暴露出open这个方法来供父组件使用
// 子组件
// 定义了 open 方法
const open = (id) => {
state.visible = true
console.log(id, '到底有没有获取到');
if(id) {
state.id = id
getDetail(id)
} else {
state.ruleForm = {
name: '',
id: '',
link: '',
sort: ''
}
}
}
// 然后需要在 defineExpose 这个函数中将这个open方法暴露出去供父组件调用
defineExpose({ open });
至此,父组件就传值给了子组件并且也成功的调用了子组件的方法。
更多推荐
已为社区贡献1条内容
所有评论(0)