浅聊一下

在vue项目中，我们经常会用到组件来进行模块化开发，当我们将一个页面拆分成多个组件时，要实现各个组件间的数据互通，那该怎么办呢？本篇文章将带大家掌握如何进行组件通信...

准备

我们先使用cli创建一个vue脚手架，在Dos下输入

vue create 文件名
让我们选择用vue2还是vue3，我们选择都用，选择第三个

选择要使用的工具

一直回车，创建成功

组件通信

父子通信

我们先来看父组件是如何向子组件中传值的

我们来完成一个功能，在input框中输入值，保存在lists数组中，然后在下面用ul li列出lists数组

将lists做成组件

在Vue.js中，父组件向子组件传递数据主要通过props属性来实现。Props是一种用于从父组件向子组件传递数据的机制。以下是一个简单的例子，展示了父组件向子组件传递数据的过程。

App.vue

js 复制代码

<template>
    <div>
        <div class="head">
            <input type="text" name="" v-model="message">
            <button @click="submit">确定</button>
        </div>
        <List :lists="lists"/>
    </div>
</template>
  
<script>
import List from '@/components/body1/List.vue'
export default {
    components: {
        List
    },
    watch:{
        lists(newVal){
            console.log(newVal);
        }
    },
    data() {
        return {
            lists: ['html', 'css'],
            message: ''
        }
    },
    methods: {
        submit() {
            if (!this.message) return
            this.lists.push(this.message)
            this.message = ''
        }
    }
}
</script>
  
<style lang="less" scoped></style>

List.vue

js 复制代码

<template>
    <div class="body">
        <ul>
          <li v-for="(item,index) in lists" :key="index">{{ item }}</li>
        </ul>
        <button @click="changeProps">修改props</button>
      </div>
    
</template>

<script>

    export default {
        props:['lists'],
        data(){
            return{
                
            }
        },
        methods:{
            changeProps(){
                this.lists[0] = 'HTML'
            }
        }
    }
</script>

<style lang="css" scoped>

</style>

当父组件的值要传给子组件的时候，只需要在组件上用v-bind绑定要传递的值

js 复制代码

 <List :lists="lists"/>

在List.vue中，我们该怎么引入父组件中传入的值呢？

我们使用props来引入，我们可以将父组件传入的值以数组方式引入

js 复制代码

    props:['lists'],

这样就实现了父子传值啦！

子父通信

我们再来看子组件是如何实现向父组件传递数据的

Head.vue

js 复制代码

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

<script>
    export default {
        data(){
            return {
                message:''
            }
        },
        methods:{
        submit(){
          if(!this.message) return 
        //   this.lists.push(this.message)
        //   将message传给父组件使用
        this.$emit('add',this.message)
          this.message=''
        }
      }
    }
</script>

<style lang="less" scoped>

</style>

在这里，我们数据源中有一个数据message，当我们按下确定按钮时，将message发送给父组件，掘友们应该发现在submit方法中有一个$emit,我们就用他来向父组件传值，add是我们的订阅名，父组件通过订阅这个名字来获取数据，将message传给父组件

js 复制代码

<template>
        <Head @add="handle"/>
      <div class="body">
        <ul>
          <li v-for="(item,index) in lists" :key="index">{{ item }}</li>
        </ul>
      </div>
  </template>
  
  <script>
  import Head from '@/components/body2/Head.vue'

    export default {
        components:{
            Head
        },
      data(){
        return {
          lists:['html','css'],
        }
      },    
      methods:{
        handle(val){
            // console.log(val);
            this.lists.push(val)
        }
      }
    }
  </script>
  
  <style lang="less" scoped>
  
  </style>

我们只需要在Head组件上订阅一下，取名为add，如果add触发，则调用handle方法将传递过来的值导入数组中

js 复制代码

<Head @add="handle"/>

子子传值

我们在前面学习了如何进行父子通信和子父通信，那么该如何子子通信呢？其实最聪明的掘友可以想到，子将值传给父，父再将值传给子不就好了吗？没错这样做也可以进行值的传递，但是你有没有想过，如果是子组件的子组件，和另外一个子组件的子组件通信呢？

那么这里就需要用到我们的vuex

vuex

Vuex 是 Vue.js 的状态管理库，用于管理应用程序的状态。它提供了一个集中化的状态存储仓库，以及一些规则确保状态只能按照一定方式进行修改。

下面就是我们的仓库，state就是仓库的数据源，mutation是方法，我们在数据源里添加了一个lists，方法里增添了向lists里添加值的方法

js 复制代码

import { createStore } from "vuex"

const store = createStore({
  state() {  // data
    return {
      lists: ['html', 'css', 'js']
    }
  },
  mutations:{//methods
    listsAdd(state,val){
        state.lists.push(val)
    }
  }
})

export default store

那在子组件中我们该如何引入呢？

引入数据源：

js 复制代码

import { mapState } from 'vuex'
export default {
  computed:mapState(['lists'])

}

引入方法：

js 复制代码

import { mapMutations } from 'vuex'
export default {
        data(){
        return {     
          message:''
        }
      },
      methods:{
        submit(){

         this.listsAdd(this.message)

        },
        ...mapMutations(['listsAdd'])
        
      }
    }

在引入以后，就把他们当成自己的数据来使用就好啦！

同样可以起作用~~

结尾

总的来说，Vue.js组件通信是构建复杂应用中不可或缺的一部分。在本文中，我们深入研究了父组件向子组件传值的实际案例，并介绍了Vue.js中常用的组件通信方式。

通过props属性，我们能够将数据从父组件传递到子组件，实现了单向数据流。这种简单而直观的数据传递方式使得组件之间的关系清晰明了，易于维护和理解。

然而，在大型应用中，为了更好地管理和共享状态，引入了Vuex这样的状态管理库。Vuex提供了一种集中化的状态管理方式，使得不同组件之间可以共享和响应相同的状态，进而实现更加复杂的应用逻辑。

总体而言，合理运用Vue.js的组件通信机制，包括props、自定义事件、Vuex等，能够提高应用的可维护性和扩展性。通过深入了解这些机制，开发者可以更加灵活地构建出符合需求的前端应用，为用户提供更好的体验。希望本文能够帮助你更好地理解和运用Vue.js组件通信，提高你的Vue.js开发技能。

vue组件通信：父子之间的那些事儿

浅聊一下

准备

组件通信

父子通信

子父通信

子子传值

vuex

结尾