VUE3.0 在父子组件中相互触发组件的函数方法

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>

最后

如果对您有帮助，希望能给个👍评论收藏三连！

想跟博主交朋友的可以通过查找，公_号❤：前端老实人，联系到博主并获取学习资料

博主为人老实，无偿解答问题哦❤