组件间通信--vue

近期在学习vue，项目中刚好用到了组件间通信，来总结一下～

一、父子组件间通信

1、父组件向子组件传递数据

通过props中组件上注册一些自定义的特性。当一个值传递给prop特性时，就变成了组件实例中的一个属性。 注：一个组件可以拥有任意数量的prop，任何值都可以传递。 如下在parent.vue和child.vue中：

parent.vue：

<child :Msg="msg"></child>
import child from './child'
components:{
    child
}

先将child注册，在parent以组件import进入。 该例中希望向子组件中将父组件中的msg以Msg传值给子组件。

child.vue：

props:{
    Msg:Boolean
}

子组件中，将想要传入的值在props中注册，并定义相应类型（本例中传入的值为boolean类型，若要传入对象，相应的写为Object），待到该值传入后即变为子组件实例中的一个属性，可以监听到，譬如用watch：

watch:{
	    Msg(val){
	        if(val){
	        //
	        }
	    }
	}

2、子组件向父组件传递数据

vue实例提供了一个内建的$emit方法传入事件来向父组件触发。

parent.vue：

<child @msg="change"></child>.  //change为父组件中的方法
import child from './child'     //将子组件引入
components:{
    child
}	
methods:{
    change:function(){
    //
    }
}

子组件：

<button @click="sendmsg"></button>
//点击事件后触发方法，传值***给父组件
methods:{
    sendmsg:function(){
    	this.$emit('msg'，"***")
    }
}

当父组件监听到msg发生变化，触发change事件

二、非父子组件间传值

1、使用一个vue实例作为中央事件总线

以parent.vue中的childBoy.vue和childGirl.vue为例写一个简单的demo。

<childBoy></childBoy>
<childGirl></childGirl>
import childBoy from './childBoy'
import childGirl from './childGirl'
components:{
	childBoy,
	childGirl
}

首先创建一个中央事件总线的js文件，这里命名为event.js

import Vue from 'vue'
export default new Vue

在俩兄弟组件中引入该文件

import Bus from '@/event.js'

建立通信，利用Bus.$emit()发送数据和Bus.$on()接受数据 在childBoy.vue中，利用button来触发事件传输数据

<button @click="submit">hiaya</button>
methods:{
    submit:function(){
        Bus.$emit("hello","123")
	}
}

hello为自定义的信息名，123为所要传的值。在childGirl.vue中，接收数据并打印出日志

Bus.$on("hello",function(message){
    console.log(message)
})

2、使用vuex状态管理模式。

state：用于数据的存储，是store中的唯一数据源

getters：基于state数据的二次包装，常用于数据的筛选和多个数据的相关性计算

mutations：类似函数，改变state数据的唯一途径，且不能用于处理异步事件

actions：用来提交mutations改变状态，而不直接变更状态，可以包含任意异步操作

modules：类似命名空间，用于项目中将各个模块的状态分开定义和操作，便于维护

具体使用demo：（该demo只使用了state和mutations） 先在父组件中导入兄弟组件并注册

<childBoy></childBoy>
<childGirl></childGirl>
import childBoy from './childBoy'
import childGirl from './childGirl'
components:{
	childBoy,
	childGirl
}

store.js引入state与mutations

import Vuex from 'vuex'
import state from './state'
import mutations from './mutations'
Vue.use(Vuex)
const store = new Vuex.Store({
  state,
  mutations
})
export default store

state中初始化数据：

const state={
    //初始化数据
    girlMsg:'',
    boyMsg:''
}
export default state

mutations将数据存放到对应的state中：

const mutations={
    //将组件到数据存放到对应到state中
    getGirlMsg(state,data){
        state.girlMsg=data.girlMsg
    },
    getBoyMsg(state,data){
        state.boyMsg=data
    }
}
export default mutations

childGirl.vue中：

<button @click="change">girlMessage</button>
<p>boyMessage:  {{boyMessage}}</p>
computed:{
    boyMessage:function(){
        return this.$store.state.boyMsg
    }
},
methods : {
    change:function(){
        this.$store.commit('getGirlMsg',{
          girlMsg:"hello,girl"
        })
    }
}

点击按钮触发事件change，change方法中触发getInfoMsg，将数据存放到store中去.boyMessage从存储中获取组件childBoy的数据

相应的childBoy中：

<button @click="change">boyMessage</button>
<p>girlMessage:  {{girlMessage}}</p>
computed:{
    girlMessage:function(){
        return this.$store.state.girlMsg
    }
},
methods : {
    change:function(){
        this.$store.commit('getBoyMsg',"hello,boy")
    }
}

总结：将vuex作为桥梁，每个子组件数据放进去之后再从中获取。