Vue组件之间通信(传递数据)的五种方式

一.父传子（父组件向子组件传递数据）

1.步骤：

（1）.父传子：通过自定义属性来进行传值

(2).在父组件中使用子组件的时候，给父组件添加自定义属性，属性值为传递的数据

(3).在子组件通过使用props接受父组件的数据，props值为一个数组，元素是自定义属性

(4).在子组件中使用传递的数据时与data数据一样

代码示例如下：

父组件中:

<template>
    <div class="dad-wrapper">
        我是父组件
<child :com="msg"/>
</div>
</template>
<script>
import child from './child.vue';
export default{
    name:'dad',
    data(){
      return{
        msg:'我是张峻豪'
      }
    },
    components:{
        child
    }
}

</script>

子组件中:

<template>
<div class="show">
{{name}},{{ age }}
<hr>
{{ com }}
</div>
</template>
<script>


export default{
    name:'child',
    data(){
        return{
            name:'朱志鑫',
            age:'16'
        }
    },

    props:['com']
}
</script>

二.子传父

1.步骤:

(1).在父组件中定义修改方法，需要传递的参数

(2).在使用子组件的时候，通过自定义事件绑定修改方法

(3).在子组件中，在需要的地方通过this.$emit('事件名‘，参数）进行广播事件，并且传递参数

(4)通过父组件中的方法，接收传递的参数，并且对数据进行修改

代码示例如下：

父组件中：

<template>
    <div class="dad-wrapper">
        {{ d1 }}
<child @p="change"/>
</div>
</template>
<script>
import child from './child.vue';
export default{
    name:'dad',
    data(){
      return{
        d1:[]
      }
    },
    methods:{
     change(e){
        this.d1=e
     }
    },
    components:{
        child
    }
}

子组件中:

<template>
<div class="show">
<button @click="commit">点击实现子传父</button>
</div>
</template>
<script>


export default{
    name:'child',
    data(){
        return{
          name:'张峻豪',
          age:16
        }
    },
    methods:{
        commit(){
            this.$emit('p',[this.name,this.age])
        }
    }
    
}
</script>

三.兄弟组件之间的传值

1.步骤：

(1).组件1将数据发送给父组件

(2).父组件将值传递给组件2

代码示例如下：

父组件中：

<template>
    <div class="dad-wrapper">
        {{ d1 }}
<child @p="change"/>
<bro :c1="d1"/>
</div>
</template>
<script>
import child from './child.vue';
import bro from './bro.vue';
export default{
    name:'dad',
    data(){
      return{
        d1:[]
      }
    },
    methods:{
     change(e){
        this.d1=e
     }
    },
    components:{
        child,
        bro
    }
}

</script>

子组件中：

<template>
<div class="show">
<button @click="commit">点击实现子传兄弟</button>
</div>
</template>
<script>


export default{
    name:'child',
    data(){
        return{
          name:'张峻豪',
          age:16
        }
    },
    methods:{
        commit(){
            this.$emit('p',[this.name,this.age])
        }
    }
    
}
</script>

兄弟组件：

<template>
<div class="bro-wrapper">
   <h4>{{ c1 }}</h4>
</div>
</template>
<script>
export default{
    name:'bro',
    data(){
        return{

        }
    },
    props:['c1']
}
</script>

四.全局事件总线：

1.步骤：

(1).创建一个空的组件

(2).在传值的组件中，用$emit()发射事件

(3)在接受值得组价中，用$on()接受事件

实现bro组件向child组件传值,代码示例如下：

在bro组件中

<template>
<div class="bro-wrapper">
  <button @click="send">点击实现传输信息</button>
</div>
</template>
<script>
import bus from '@/bus';
export default{
    name:'bro',
    data(){
        return{
            message:['张峻豪','朱志鑫','余宇涵','张极']
        }
    },
    methods:{
        send(){
            bus.$emit('busEvent',this.message)
        }
    }
   
}
</script>

在child组件中:

<template>
<div class="show">
<h4>{{ a1 }}</h4>
<button @click="acc">点击执行</button>
</div>
</template>
<script>

import bus from '@/bus'
export default{
    name:'child',
    data(){
        return{
        a1:''
        }
    },
    methods:{
        acc(){
            bus.$on('busEvent',e=>{
                this.a1=e
            })
            
        }
    }
    
}
</script>

五.Vuex

Vuex是一个专为Vue,js应用程序开发的状态管理模式+库，它采用集中式存储管理应用的所有组件的状态，并且以一种相应的规则保证状态以一种可以预测的方式发生变化。

Vuex可以帮助我们管理共享状态，并且附带了更多的概念和框架，如果不打算开发大型单页应用，使用Vuex可能是繁琐的。如果开发一个大型单页应用，使用Vuex是高效的。

Vuex中一共有五个状态State Getter Mutation Action Module

1.State:提供唯一的公共数据源，所有的共享数据统一放到store的state中进行储存，与data相似


import Vue from 'vue'
import Vuex from 'vuex'
 
Vue.use(Vuex)
 
export default new Vuex.Store({
  //数据，相当于data
  state: {
    name:"张峻豪",
    age:12,
    count:0
  },
})

2.Mutation:更改vuex的store中的状态的唯一方法是提交mutation，vuex中的mutation类似于事件，每个mutation都有一个字符串的事件类型和一个回调函数，其中的回调函数就是我们实际进行状态更改的地方

mutations:{
   addcount(state,num){
         state.count=+state.count+num
   },
    reduce(state){
     state.count--
}
},

可以使用commit触发Mutation操作


methods:{
//加法
btn(){
this.$store.commit("addcount",10) 
}
//减法
btn1(){
this.$store.commit("reduce") 
}

3.Action：进行异步操作，Action与Mutation相似，但是一般不用Mutation异步操作，如果想要进行异步操作，使用Action

actions:{
  asyncAdd(context){
   setTimeout(()=>{
     context.commit("reduce")
},1000);
}
}

如果想要在组件中使用，可以直接使用dispatch触发Action函数

this.$store.dispatch("asynAdd")

4.Getter:类似于vue中的computed，可以进行缓存，对于Store中的数据进行加工处理形成一个新的数据

5.Modules：

当遇到大型项目时，数据量会很大，store就会显得非常臃肿，想要解决上述问题，Vuex允许我们将store分割成模块，每个模块拥有自己的state,mutation,action,getter,甚至是嵌套子模块。

但是在默认情况下，模块内部的action和mutation仍然是注册在全局命名空间的，这就使得多个模块能够对于同一个action和mutation作出相应。