Vue组件通信：打破数据孤岛的三种方式

Vue组件通信是前端开发中常见的问题之一。在Vue中，我们通常有三种方式来进行组件间的通信，分别是父子组件通信、子父组件通信以及兄弟组件通信。在本文中，我们将深入探讨这三种方式的使用场景和实现方式。

1. 父子组件通信

父子组件通信是最基础也是最常见的一种通信方式。父组件通过v-bind绑定一个属性，子组件通过props接收父组件传递的数据。这是一种单向传递的方式，子组件不能直接修改props中的值。

vue 复制代码

// 父组件
<template>
    <div class="head">
        <input type="text" v-model="message">
        <button @click="submit">确定</button>
    </div>
   <!-- list -->
   <list :lists="lists" />
</template>

<script>
import list from './components/body2/list.vue'
export default {
    components: {
        list
    },
    data() {
        return {
            lists: ['html', 'css'],
            message: ''
        }
    },
    methods: {
        submit() {
            if (this.message) {
                this.lists.push(this.message)
            }
        }
    }
}
</script>

// 子组件
<template>
     <div class="body">
        <ul>
            <li v-for="(item,index) in lists" >{{ item }}</li>
        </ul>
    </div>
</template>

<script>
    export default {
        props: ['lists']
    }
</script>

2. 子父组件通信

子父组件通信是通过事件实现的。父组件通过v-on订阅一个事件，子组件通过$emit发布该事件，从而触发父组件的订阅方法。

vue 复制代码

// 父组件
<template>
    <Header @add="handle" />    <!--订阅add事件-->
    <div class="body">
        <ul>
            <li v-for="(item, index) in lists">{{ item }}</li>
        </ul>
    </div>
</template>

<script>
import Header from './components/body3/header.vue' 
export default {
    components: {
        Header
    },
    data() {
        return {
            lists: ['html', 'css'],
        }
    },
    methods: {
        handle(e) {
            console.log(e);
            this.lists.push(e)
        }
    }
}
</script>

// 子组件
<template>
    <div class="head">
        <input type="text" v-model="message">
        <button @click="submit">确定</button>
    </div>
</template>

<script>
export default {
    data() {
        return {
            message: '',
        }
    },
    methods: {
        submit() {
            // 把message push到父组件的lists中
            // 如何把子组件的数据源拿给父组件使用
            this.$emit('add', this.message)     // 发布add事件
            this.message = ''
        }
    }
}
</script>

3. 兄弟组件通信

兄弟组件通信通常使用Vuex进行状态管理。Vuex是Vue官方提供的状态管理工具，通过在store中定义状态，各组件可以通过actions mutations来修改状态，实现兄弟组件之间的通信。vuex不仅可以用于兄弟组件的通信，同样也可以用于上面两种组件的通信

这是vuex里面的内容：

vuex 复制代码

import { createStore } from 'vuex'

export default createStore({
  state: {   // data数据源
    lists: ['html', 'css', 'js']
  },
  mutations: {  // methods  
    addLists(state,msg) {   // mutations中定义的方法，天生具有一个形参，代表state数据源
      state.lists.push(msg)     // addLists(1)
    }
  }
})

以下是两个兄弟组件中的内容：

vue 复制代码

// 第一个组件
<template>
    <div class="head">
        <input type="text" v-model="message">
        <button @click="submit">确定</button>
    </div>
</template>

<script>
import { mapMutations } from 'vuex';

export default {
    data() {
        return {
            message: ''
        }
    },
    methods: {
        ...mapMutations(['addLists']),
        submit() {
            // 把message存入仓库中的lists数组中
            this.addLists(this.message)
        }
    }
}
</script>

// 第二个组件
<template>
    <div class="body">
        <ul>
            <li v-for="(item, index) in lists">{{ item }}</li>
        </ul>
    </div>
</template>

<script>
import { mapState } from 'vuex';

export default {
    computed: {
        ...mapState(['lists'])
    }
}
</script>

通过父子组件通信、子父组件通信和兄弟组件通信这三种方式，我们能够更灵活地在Vue应用中进行组件间的数据传递和状态管理，打破了数据孤岛，提高了组件的复用性和可维护性。