Vue.js 组件通信-CFANZ编程社区

学习目录：

Vue.js 简介
Vue.js 实例与数据绑定
Vue.js 计算属性和侦听器
Vue.js 条件渲染和列表渲染
Vue.js 事件处理
Vue.js 表单输入绑定
Vue.js 组件基础
Vue.js 组件通信
Vue.js 插槽
Vue.js 动态组件和异步组件
Vue.js 自定义指令
Vue.js 过渡和动画
Vue.js 混入
Vue.js 自定义事件和 v-model
Vue.js 渲染函数和 JSX
Vue.js 插件
Vue.js 单文件组件
Vue.js Webpack 配置和打包优化
Vue.js Vue Router
Vue.js Vuex
Vue.js 服务端渲染
Vue.js 代码测试和调试
Vue.js 生态系统
Vue.js 最佳实践和性能优化
Vue.js 应用部署和上线

在 Vue.js 中，每个组件都可以被看作是一个独立的模块，这些模块可以通过不同的方式进行通信。在本文中，我们将介绍 Vue.js 中的组件通信，并讨论一些常见的技术和最佳实践。

父子组件通信

在 Vue.js 中，父子组件之间的通信是最常见的一种情况。我们可以通过 props 和 events 两种方式来实现父子组件之间的通信。

Props

Props 是父组件向子组件传递数据的一种方式。父组件可以在子组件的标签上使用 v-bind 指令将数据传递给子组件。子组件则可以在自己的 props 中声明这些数据，并在组件内部使用。

例如，我们有一个父组件 Parent 和一个子组件 Child，我们可以像下面这样在 Parent 组件中传递数据给 Child 组件：

<template>
  <div>
    <child-component :message="parentMessage"></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: 'Hello from parent'
    }
  }
}
</script>

在 Child 组件中，我们可以在 props 中声明 message，并在组件内部使用这个数据：

<template>
  <div>
    {{ message }}
  </div>
</template>

<script>
export default {
  props: {
    message: String
  }
}
</script>

Events

Events 是子组件向父组件发送消息的一种方式。子组件可以通过 $emit 方法触发一个自定义事件，并传递数据给父组件。父组件可以在子组件的标签上使用 v-on 指令监听这个事件，并在自己的方法中处理数据。

例如，我们有一个父组件 Parent 和一个子组件 Child，我们可以像下面这样在 Child 组件中触发一个自定义事件：

<template>
  <div>
    <button @click="sendMessage">Send message to parent</button>
  </div>
</template>

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

在 Parent 组件中，我们可以在子组件的标签上使用 v-on 指令监听这个事件，并在自己的方法中处理数据：

<template>
  <div>
    <child-component @message="handleMessage"></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleMessage(message) {
      console.log(message) // 输出 "Hello from child"
    }
  }
}
</script>

兄弟组件通信

在 Vue.js 中，兄弟组件之间的通信需要通过一个共同的父组件来实现。我们可以把数据和事件都放在共同的父组件中，然后通过 props 和 events 分别传递给不同的子组件。

例如，我们有一个父组件 Parent、一个兄弟组件 Brother 和一个 Sister，我们可以像下面这样在 Parent 组件中定义数据和方法，并使用 props 和 events 分别传递给 Brother 和 Sister 组件：

<template>
  <div>
    <brother-component :message="parentMessage" @update="handleUpdate"></brother-component>
    <sister-component :message="parentMessage"></sister-component>
  </div>
</template>

<script>
import BrotherComponent from './BrotherComponent.vue'
import SisterComponent from './SisterComponent.vue'

export default {
  components: {
    BrotherComponent,
    SisterComponent
  },
  data() {
    return {
      parentMessage: 'Hello from parent'
    }
  },
  methods: {
   handleUpdate(message) {
      this.parentMessage = message
    }
  }
}
</script>

在 Brother 组件中，我们可以在 props 中声明 message，并在组件内部使用这个数据。同时，我们可以在组件中定义一个方法，通过 $emit 方法触发一个自定义事件，并传递数据给父组件：

<template>
  <div>
    {{ message }}
    <button @click="sendMessage">Send message to parent</button>
  </div>
</template>

<script>
export default {
  props: {
    message: String
  },
  methods: {
    sendMessage() {
      this.$emit('update', 'Hello from brother')
    }
  }
}
</script>

在 Sister 组件中，我们也可以在 props 中声明 message，并在组件内部使用这个数据：

<template>
  <div>
    {{ message }}
  </div>
</template>

<script>
export default {
  props: {
    message: String
  }
}
</script>

跨级组件通信

在 Vue.js 中，跨级组件之间的通信需要通过一个中间组件来实现。我们可以把数据和事件都放在中间组件中，然后通过 props 和 events 分别传递给不同的子组件。

例如，我们有一个父组件 Grandparent、一个子组件 Child 和一个孙子组件 Grandchild，我们可以像下面这样在 Grandparent 组件中定义数据和方法，并使用 props 和 events 分别传递给 Child 和 Grandchild 组件：

<template>
  <div>
    <child-component :message="parentMessage" @update="handleUpdate"></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: 'Hello from grandparent'
    }
  },
  methods: {
    handleUpdate(message) {
      this.parentMessage = message
    }
  }
}
</script>

在 Child 组件中，我们可以在 props 中声明 message，并在组件内部使用这个数据。同时，我们可以在组件中定义一个方法，通过 $emit 方法触发一个自定义事件，将数据传递给 Grandparent 组件：

<template>
  <div>
    {{ message }}
    <grandchild-component :message="message" @update="sendMessage"></grandchild-component>
  </div>
</template>

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

export default {
  components: {
    GrandchildComponent
  },
  props: {
    message: String
  },
  methods: {
    sendMessage(message) {
      this.$emit('update', message)
    }
  }
}
</script>

在 Grandchild 组件中，我们可以在 props 中声明 message，并在组件内部使用这个数据。同时，我们可以在组件中定义一个方法，通过 $emit 方法触发一个自定义事件，将数据传递给 Child 组件：

<template>
  <div>
    {{ message }}
    <button @click="sendMessage">Send message to grandparent</button>
  </div>
</template>

<script>
export default {
  props: {
    message: String
  },
  methods: {
    sendMessage() {
      this.$emit('update', 'Hello from grandchild')
    }
  }
}
</script>

通过这种方式，我们可以实现跨级组件之间的通信。

Vuex 状态管理

在 Vue.js 应用程序中，有时候需要在多个组件之间共享同一个状态。在这种情况下，我们可以使用 Vuex 这个状态管理库来管理应用程序的状态。

在 Vuex 中，我们可以将应用程序的状态存储在一个集中的 store 中。组件可以通过 getters 来获取 store 中的状态，通过 mutations 来修改 store 中的状态，通过 actions 来执行异步操作。

例如，我们有一个 store，其中存储了一个计数器的值，我们可以在组件中使用 Vuex 的辅助函数来获取和修改这个计数器的值：

<template>
  <div>
    <p>Counter: {{ counter }}</p>
    <button @click="increment">Increment counter</button>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'

export default {
  computed: {
    ...map