深入理解Vue3中利用mitt：实现轻量级事件监听与触发

在 Vue3 中，父组件和子组件之间可以通过一些方式进行通信。其中，父组件向子组件通信主要有两种方式：传值和调用子组件的方法。

一、父组件向子组件传值

当父组件需要向子组件传递数据时，可以通过属性绑定的方式来实现。父组件可以在其模板中使用 v-bind 指令将需要传递的数据绑定到子组件的属性上。子组件可以通过 props 选项来定义接受的属性。下面是一个示例代码：

• <template> <ChildComponent :data="parentData" /></template> <script>import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent, }, data() { return { parentData: '这是父组件的数据', }; },};</script>

在上面的示例中，父组件定义了一个名为 parentData 的数据，然后通过 v-bind 指令将其绑定到子组件的 data 属性上。子组件可以通过 props 选项来接收这个属性，并在自己的模板中使用它。

<template>  <div>    {{ data }}  </div></template>
<script>export default {  props: ['data'],};</script>

二、父组件调用子组件的方法

当父组件需要调用子组件的方法时，可以通过事件派发的方式来实现。父组件可以在其模板中使用 v-on 指令监听子组件派发的事件，并在相应的处理函数中调用子组件的方法。下面是一个示例代码：

• <template>  <ChildComponent ref="childComponent" @click="parentMethod" /></template> <script>import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent, }, methods: { parentMethod() { // 在这里调用子组件的方法 this.$refs.childComponent.childMethod(); }, },};</script>

在上面的示例中，父组件定义了一个名为 parentMethod 的方法，并使用 v-on 指令监听子组件的 click 事件。当点击子组件时，会触发这个事件，并调用父组件的 parentMethod 方法。在 parentMethod 方法中，通过 this.$refs.childComponent 来获取子组件的实例，并调用子组件的 childMethod 方法。

<template>  <div>    <button @click="childMethod">点击我</button>  </div></template>
<script>export default {  methods: {    childMethod() {      // 子组件的方法逻辑      console.log('这是子组件的方法');    },  },};</script>

总结：在 Vue3 中，父组件向子组件通信主要有两种方式：传值和调用子组件的方法。通过属性绑定可以实现父组件向子组件传值，而通过事件派发可以实现父组件调用子组件的方法。这些通信方式使得组件之间能够更好地协作和共享数据，提高了应用的可维护性和扩展性。

  欢迎加入我们的前端组件学习交流群，一起沟通学习成长！可添加群主微信，审核通过后入群。