一文搞懂vue的父子传值

数据共享

在日常开发会经常碰到组件之间数据传输的问题，一般情况最常用的就是这两种关系的数据传输关系：

两种传输方式采用不同的方法，下面就进行详细分析一下。

父子传值

父组件向子组件共享数据需要使用自定义属性。示例代码如下：

父组件

父组件通过引入的方式将子组件引入并且注册使用

<template>
	<CommodityInfo :msg='message'></CommodityInfo>
</template>

<script>
import CommodityInfo from "./components/CommodityInfo.vue";
export default {
	components: {CommodityInfo},
	data(){
		return{
			message:'父组件'
		}
	}
}
</script>

通过:msg='message'将message传给CommodityInfo
这里的msg对应的是子组件接收的方法名（所以字段必须一致），而值则是message

子组件

子组件通过props进行接收

<template>
	<div>
		<h1>父组件传递过来的值为：{{ msg }}</h1>
	</div>
</template>
<script>
	export default {
  	props:['msg'],
  }
</script>

子父传值

子组件向父组件共享数据使用自定义事件。示例代码如下：

子组件

子组件通过this.$emit将data穿给父组件，这里的numchange是传给父组件的方法名（同样，字段与接收时必须一致）,this.data则是需要传给父组件的值。

<script>
export default {
	data(){
    return{
      data: '子组件穿入的数据',
    }
  },
	methods:{
		Transmit(){
			this.$emit('numchange',this.data)
		}
	}
}
</script>

父组件

父组件通过@numchange接收到的值去触发getNumchange，而val则就是子组件传过来的值(this.data)

<template>
	<CommodityInfo @numchange='getNumchange'></CommodityInfo>
</template>

<script>
import CommodityInfo from "./components/CommodityInfo.vue";
export default {
	components: {CommodityInfo},
	data(){
		return{
			numchange:''
		}
	},
	methods:{
		getNumchange(val){
			this.numchange = val
		}
	}
}
</script>