这个是父组件的代码:
<template>
<Layouts ref="RefChilde"> //第一步写ref
<router-view>
</router-view>
</Layouts>
</template>
<script>
import Layouts from "./layouts/Layouts.vue"; //引入子组件
export default {
components: {
Layouts, //注册
},
setup() {
const RefChilde = ref(); //定义与ref同名变量
onMounted(() => {
RefChilde.value.sonFn(); //调用子组件的方法或者变量,通过value
});
return{
RefChilde //抛出变量
}
},
}
</script>
setup() {
const sonFn = () => {
console.log('调用了');
};
}
子组件:
setup(props, context) {
onMounted(() => {
context.emit('postData');
})
}
父组件:
<template>
<div>
<!-- 1. 监听子组件发射的方法名,调用方法名 -->
<child @postData="postData"></child>
</div>
</template>
<script>
setup() {
// 2. 定义方法
const postData = () => {
console.log('触发父组件的方法');
}
return {
// 3. 抛出去
postData
};
},
components: {
child,
},
}
</script>
版权说明 : 本文为转载文章, 版权归原作者所有 版权申明
原文链接 : https://blog.csdn.net/weixin_52691965/article/details/120563408
内容来源于网络,如有侵权,请联系作者删除!