Vue父子组件通信：入门实例讲解上

在我们的生活，通信无处不在，它维系着一切联系与协作，甚至对技术世界来说，沟通也是不可或缺的。在当下广泛应用的 Vue.js 框架中，同样存在父子组件通信机制，这一机制允许组件之间的传递信息，从而实现数据的跨组件交互。

Vue 框架中的组件如同一个个组件，每个组件都拥有独立的状态与方法，有如一个具备独特功能的小程序。然而，在组件彼此组合时，它们会形成层层嵌套的复杂网络，如此一来，就需要一种方法帮助它们共享信息并相互协作。这就是 Vue 父子组件通信机制的由来，它通过一个名为 prop 的特殊属性，能够将父组件的数据传递给子组件，并通过自定义事件（自定义事件）来传递子组件的数据给父组件。

为了让你更好的理解 Vue 父子组件通信机制，我们准备了一个简单的小程序，它包含两个组件：Farther 和 Son。

• Farther 组件：Farther 组件作为一个父级组件，其职责是提供数据和接收子组件传回的事件。

• Son 组件：Son 组件作为一个子级组件，它负责显示数据并传递事件到父组件。

现在，让我们详细讲解这些组件的使用方法。

Farther.vue 组件代码如下：

<template>
  <div>
    <h1>{{ title }}</h1>
    <button @click="changeTitle">切换标题</button>
    <Son :title="title" @title-changed="onTitleChanged" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: 'Vue 父子组件通信'
    }
  },
  methods: {
    changeTitle() {
      this.title = 'Vue 父子组件通信 - 已更改'
    },
    onTitleChanged(newTitle) {
      this.title = newTitle
    }
  }
}
</script>

Son.vue 组件代码如下：

<template>
  <div>
    <h2>子组件    <button @click="changeTitle">改变标题</button>
  </div>
</template>

<script>
export default {
  props: ['title'],
  methods: {
    changeTitle() {
      this.$emit('title-changed', 'Vue 父子组件通信 - 子组件已更改')
    }
  }
}
</script>

我们将这两个组件都放在了一个 App.vue 组件中，用于演示。

<template>
  <div>
    <Farther />
  </div>
</template>

<script>
import Farther from './Farther.vue'

export default {
  components: {
    Farther
  }
}
</script>

现在，我们就可以运行这个小程序，看看 Vue 父子组件通信机制的实际效果。

当你点击 Farther 组件中的「切换标题」按钮时，你会看到「Vue 父子组件通信」这个标题会改变为「Vue 父子组件通信 - 已更改」。这是因为当父组件 Farther 组件中的按钮被点击时，它会调用 changeTitle() 方法，该方法将 Farther 组件中的 title 数据更改为「Vue 父子组件通信 - 已更改」。这个更改的数据会通过 props 将 title 传递给子组件 Son，从而在 Son 组件中显示。

当你在子组件 Son 中点击「改变标题」按钮时，Son 组件会触发一个自定义事件 title-changed，该事件将包含一个新标题「Vue 父子组件通信 - 子组件已更改」。这个自定义事件会被父组件 Farther 组件捕获，并调用 onTitleChanged() 方法，该方法将 Farther 组件中的 title 数据更新为「Vue 父子组件通信 - 子组件已更改」。

这正是 Vue 父子组件通信机制的运作原理。它允许组件之间共享数据并传递事件，从而实现跨组件的协作和交互。