Vue3组件间的通信方式详解

Vue3是一款强大的前端开发框架，它的组件化开发模式使得组件间通信成为必不可少的一部分。Vue3支持多种组件间通信方式，以满足不同场景下的需求。本文将详细讲解Vue3组件间的通信方式。

Props

Props是父组件向子组件传递数据的一种方式。在父组件中使用子组件时，通过在子组件上添加属性来向子组件传递数据。在子组件中通过props接收父组件传递的数据。示例代码如下：

父组件

<template>
  <div>
    <ChildComponent message="Hello Vue3"></ChildComponent>
  </div>
</template>
<script>
import ChildComponent from './components/ChildComponent.vue';

export default {
  name: 'ParentComponent',
  components: {
    ChildComponent
  }
}
</script>

子组件

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>
<script>
export default {
  name: 'ChildComponent',
  props: {
    message: {
      type: String,
      default: ''
    }
  }
}
</script>

Emit

Emit是Vue3提供的一种子组件向父组件传递数据的方式。通过在子组件中使用$emit()方法触发一个自定义事件，并在父组件中使用@自定义事件名监听该事件来接收子组件传递的数据。示例代码如下：

父组件

<template>
  <div>
    <ChildComponent @sendMsg="receiveMsg"></ChildComponent>
    <p>{{ msg }}</p>
  </div>
</template>
<script>
import ChildComponent from './components/ChildComponent.vue';

export default {
  name: 'ParentComponent',
  components: {
    ChildComponent
  },
  data() {
    return {
      msg: ''
    }
  },
  methods: {
    receiveMsg(msg) {
      this.msg = msg;
    }
  }
}
</script>

子组件

<template>
  <div>
    <button @click="sendMessage">发送消息</button>
  </div>
</template>
<script>
export default {
  name: 'ChildComponent',
  methods: {
    sendMessage() {
      this.$emit('sendMsg', 'Hello Vue3');
    }
  }
}
</script>

Provide/Inject

Provide/Inject是Vue3提供的一种父组件向子组件传递数据的方式。在父组件中通过provide选项提供数据，然后在子组件中通过inject选项来注入数据。示例代码如下：

父组件

<template>
  <div>
    <ChildComponent></ChildComponent>
  </div>
</template>
<script>
import ChildComponent from './components/ChildComponent.vue';

export default {
  name: 'ParentComponent',
  components: {
    ChildComponent
  },
  provide() {
    return {
      message: 'Hello Vue3'
    }
  }
}
</script>

子组件

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>
<script>
export default {
  name: 'ChildComponent',
  inject: ['message']
}
</script>

$attrs/$listeners

在Vue3中，父组件向子组件传递的数据不仅仅局限于上述提到的方式。父组件传递到子组件的属性和事件也可以在子组件中使用。在子组件模板中，通过 $attrs 和 $listeners 分别访问父组件传递下来的非 prop 特性和监听器（事件）。示例代码如下：

父组件

<template>
  <div>
    <ChildComponent title="Hello" @change="handleChange"></ChildComponent>
  </div>
</template>
<script>
import ChildComponent from './components/ChildComponent.vue';

export default {
  name: 'ParentComponent',
  components: {
    ChildComponent
  },
  methods: {
    handleChange(e) {
      console.log(e.target.value);
    }
  }
}
</script>

子组件

<template>
  <div>
    <input v-bind="$attrs" v-on="$listeners" />
  </div>
</template>
<script>
export default {
  name: 'ChildComponent',
  inheritAttrs: false
}
</script>

以上是Vue3中常用的几种组件间通信方式，当然还有其他的方式，如provide/inject函数、Vuex等。根据实际需求选择合适的方式进行组件间通信。