VUE3基础教程 父子组件通信的几种方式

前言

在 Vue 3 中，父子组件通信是一个重要的主题。理解和掌握父子组件通信的不同方式对于开发复杂的应用程序至关重要。本教程将介绍 Vue 3 中父子组件通信的几种常见方式。

方式一：Props

在 Vue 中，父组件向子组件传递数据最常用的方式就是通过 Props 实现。通过将数据以属性的方式传递给子组件，子组件可以通过 this.$props 或者直接访问这些属性来获取数据。下面是一个示例：

<template>
  <div>
    <h4>父组件</h4>
    <ChildComponent :message="message" />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent';

export default {
  data() {
    return {
      message: 'Hello, World!'
    }
  },
  components: {
    ChildComponent
  }
}
</script>

在上面的代码中，我们在父组件中定义了一个名为 message 的数据，在模板中通过 :message="message" 将其传递给子组件 ChildComponent。子组件中可以通过 this.$props.message 访问该数据。

方式二：$emit

另一种常见的父子组件通信方式是使用 $emit 方法。子组件通过调用 $emit 方法触发一个自定义事件，并传递数据给父组件。父组件需要在模板中监听这个自定义事件并处理接收到的数据。下面是一个示例：

<template>
  <div>
    <h4>子组件</h4>
    <button @click="sendMessage">发送消息</button>
  </div>
</template>

<script>
export default {
  methods: {
    sendMessage() {
      this.$emit('message', 'Hello, World!');
    }
  }
}
</script>

<template>
  <div>
    <h4>父组件</h4>
    <ChildComponent @message="receiveMessage" />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent';

export default {
  methods: {
    receiveMessage(message) {
      console.log(message); // 输出 'Hello, World!'
    }
  },
  components: {
    ChildComponent
  }
}
</script>

在上面的代码中，当子组件中的按钮被点击时，会调用 sendMessage 方法，并通过 this.$emit('message', 'Hello, World!') 触发一个名为 message 的自定义事件。父组件中通过 @message 监听这个自定义事件，并在 receiveMessage 方法中接收到传递的数据。

方式三：Provide/Inject

Vue 3 中引入了 Provide/Inject 的新特性，这是一种更高级的父子组件通信方式。通过在父组件中提供数据，子组件可以使用 inject 选项获取这些数据。下面是一个示例：

<script>
export default {
  provide() {
    return {
      message: 'Hello, World!'
    };
  }
}
</script>

<template>
  <div>
    <h4>子组件</h4>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  inject: ['message']
}
</script>

在上面的代码中，父组件通过 provide 选项提供了一个名为 message 的数据，子组件通过 inject: ['message'] 来获取这个数据，并在模板中使用 {{ message }} 来展示它。

总结

本教程介绍了父子组件通信的几种方式：Props、$emit 和 Provide/Inject。Props 是一种常见且简单的方式，适用于父组件向子组件传递数据。$emit 可以实现子组件向父组件传递数据。而 Provide/Inject 是一种更高级的方式，适用于跨层级的组件通信。根据具体的场景需求，选择合适的方式可以提高开发效率和代码的可维护性。