1. 父组件触发子组件的方法
这个是父组件的代码：
1.<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('调用了'); }; }
2. 子组件触发父组件的方法
子组件：
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>
最后
如果对您有帮助，希望能给个👍评论收藏三连！
想跟博主交朋友的可以通过查找，公_号❤：前端老实人，联系到博主并获取学习资料
博主为人老实，无偿解答问题哦❤
