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.兄弟组件之间传值

后续补上

Vue 组件 的通信

1、父-->子

猜你喜欢