Vue 组件的通信

vue不得不了解的就是组件间的数据通信(暂且不谈vuex插件)。

通信方式根据组件之间的关系有不同之处。

组件关系有下面三种：父-->子、子-->父、非父子

1、父-->子

父向子传递数据用prop

<!--子组件代码-->
<template>
	<div> {{message}} </div>
</template>

<script>
	export default{
		name="child",
		prop: ['message'], //利用prop函数，定义一个"message"变量
		data(){
			
		}
	}
</script>

<!--父组件代码-->
<template>
	<v-child message="msg"> </v-child>   <!--在这里传值-->

</template> 

<script> 
　　import Child from './child.vue' 
　　export default{ 
　　　　name: 'parent',
　　　　components: { 'v-child': Child }, 
　　　　data(){ 
　　　　　　return{ msg:'hello world' 
　　　　　　　　} 
　　} 
</script>

　2.子组件给父组件传值（$emit） 子组件给父组件传值的中心思想是；通过方法传参，具体用法如下：

<!-- 子组件部分 -->

<script>
	data(){
		return{
			msg: '123'
		}
	},
	method: {
		funcName: function(){
			this.$emit("tanslate",this.msg)
			//自定义一个tanslate和一个参数this.msg
		}
	}
</script>

父页面HTML部分： 通过子页面定义tanslate事件调用自定的tanslateText方法

<v-child v-on:tanslate="tanslateText">  </v-child>

　父页面js部分：

method:{
	tanslateText:function(text){ //text是字组件传过来的参数
		console.log(text) //打印出子组件传递过来的参数
	}
}

　　

3.兄弟组件之间传值

创建一个store.js文件，注册Vuex

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

//定义state，并将listName设置成一个空对象
const state = {
	listName:{} 
}

/定义mutations,可以传参数，用于设置state里的listName
const mutations = {
	set_listname : (state, value) => {
		state.listName = value ;
	}
}

//定义getters,用于获取state里的对象
const getters = {
	get_listname: state => {
		return{ state.listName
	}
}

export default new Vuex.store({
	getters,
	state,
	mutations
})

　　

在vue实例中注册store.js

//main.js

import Vue from 'vue'
import App from './App'
import store from './style'

new Vue({
el : '#app',
route,
store,
template: '<App/>',
components: {App}
})

　　

后续补充完善