Vue组件间通信方法总结（父子组件、兄弟组件及祖先后代组件间

前言

除了使用 Vuex 方法外，vue 提供了各种各样的组件间通信的方案。文章整理一下父子组件、兄弟组件、祖先后代组件间是如何通信的。 💬

🌊 父子组件通信

props 和 $emit 父子组件通信

子组件有时需要与父组件进行沟通，沟通的方式就是子组件 emit 事件，父组件通过监听这个事件来做进一步动作。而父组件与子组件通信则使用 props

假设这里有一个父组件并引入了一个子组件 my-comp：

<my-comp v-for="msg in msgs" :key="msg.id" :msg="msg"></my-comp>

父组件有一系列 msg 数据需要通过子组件渲染，将 msg 作为 prop 传递给子组件即可：

import MyComp from '@/components/MyComp.vue'
export default {
 name: 'home',
 components: {
 MyComp
 },
 data () {
 return {
 msgs: [{
 id: 1, data: 'hello js'
 }, {
 id: 2, data: 'css world'
 }, {
 id: 3, data: 'animated style'
 }] }
 }
}

我们通过点击子组件每一项触发一个事件，父组件监听这个事件去动态改变子组件的 color 样式，这就是父组件监听子组件事件，事件处理函数可以从子组件传递值给父组件：

<my-comp v-for="msg in msgs" :key="msg.id" :msg="msg" :colored="colored" @handle-change-color="handleChangeColor"></my-comp>

首先增加一个事件 handle-change-color 当这个事件被触发时修改名为 color 的 data，然后将 colored 通过 props 传入到子组件：

import MyComp from '@/components/MyComp.vue'
export default {
 name: 'home',
 components: { // 注册组件
 MyComp
 },
 data () {
 return {
 colored: false, // 状态
 msgs: [{
 id: 1, data: 'hello js'
 }, {
 id: 2, data: 'css world'
 }, {
 id: 3, data: 'animated style'
 }] }
 },
 methods: {
 handleChangeColor () {
 this.colored = !this.colored // 监听事件动态改变 colored
 }
 // handleChangeColor (param) { // 子组件触发的事件可能包含参数
 }
}

然后编辑子组件：

<div>
 <div @click="handleClick" :style="{color}">
 {{msg.id}} - {{msg.data}} ⭕
 </div>
</div>

首先渲染数据，并监听 click 点击事件，当点击触发事件处理函数 handleClick

export default {
 name: 'MyComp',
 computed: {
 color () { // color 为样式
 return this.colored ? 'red' : 'black' // 根据父组件传入的 props 动态修改样式
 }
 },								 
 1/4    1 2 3 4 下一页 尾页