父与子，Vue组件间通信指南

2023-10-07 04:22:21

Vue 父子组件通信指南

在 Vue 生态系统中，组件化的架构是构建交互式和可维护应用程序的基础。父组件和子组件之间的有效通信至关重要，它使您可以创建模块化和可重用的代码。在这篇文章中，我们将深入探讨 Vue 中父子组件通信的常见方式，并通过代码示例来说明它们的实际应用。

组件属性

简介： 组件属性是父组件向子组件传递数据的最直接方法。父组件可以通过设置子组件的属性，向子组件传递数据。

语法：

<!-- 父组件 -->
<ChildComponent :message="message" />

<!-- 子组件 -->
props: ['message']

示例： 父组件将 message 变量传递给子组件：

<!-- 父组件 -->
<template>
  <ChildComponent :message="greeting" />
</template>

<script>
export default {
  data() {
    return {
      greeting: 'Hello, Vue!'
    }
  }
}
</script>


<!-- 子组件 -->
<template>
  <p>{{ message }}</p>
</template>

组件事件

简介： 组件事件允许子组件通知父组件发生了特定事件。子组件通过触发事件，而父组件通过监听该事件来做出响应。

语法：

<!-- 子组件 -->
<button @click="handleClick">发送消息给父组件</button>

<!-- 父组件 -->
<ChildComponent @message="handleMessage" />

示例： 子组件触发 message 事件，父组件处理该事件并显示消息：

<!-- 子组件 -->
<template>
  <button @click="handleClick">发送消息给父组件</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      this.$emit('message', '你好，父组件！')
    }
  }
}
</script>


<!-- 父组件 -->
<template>
  <ChildComponent @message="handleMessage" />
</template>

<script>
export default {
  methods: {
    handleMessage(message) {
      console.log(message)
    }
  }
}
</script>

组件插槽

简介： 组件插槽允许父组件控制子组件的呈现方式。父组件在子组件中定义插槽，并向这些插槽插入内容。

语法：

<!-- 父组件 -->
<ChildComponent>
  <div>你好，Vue！</div>
</ChildComponent>

<!-- 子组件 -->
<template>
  <div>
    <slot></slot>
  </div>
</template>

示例： 父组件向子组件的插槽插入内容：

<!-- 父组件 -->
<template>
  <ChildComponent>
    <div>你好，Vue！</div>
  </ChildComponent>
</template>


<!-- 子组件 -->
<template>
  <div>
    <slot></slot>
  </div>
</template>