vue父子组件之间的传值

父子组件之间传值

1.父传子(动态传值)

  1. 第一步,在父组件中,通过v-bind把自己data中数据项绑定到自定义属性上
<my-com :datamsg='msg'></my-com>
				  这是data中数据项msg
  1. 第二步,在子组件内部,props接收自定义属性, props和data,methods等同级
props['datamsg']
 // 或者这样写
props:{
	datamsg:{
		type:string,
		required:true
		}
	}

注意:子组件中收到父组件传来的数据时,不能修改他,因为父组件重新渲染时(父组件中修改这个值的时候),子组件中修改的值会被父组件中修改的值覆盖
2.子传父

  1. 第一步,子组件中,把一个事件(自定义事件)通过$emit抛出,携带着参数,这个参数即为子组件传递给父组件的数据
this.$emit('abc',[参数(即数据)])
		自定义事件abc
  1. 父组件中,调用子组件时,添加对自定义事件的监听
<my-com @abc = 'hAbc'></my-com> 
				// hAbc为处理函数
---------------------------------------------------
methods:{
	hAbc(obj){
		// obj即为子组件传来的数据	
	}
}
©️2020 CSDN 皮肤主题: 游动-白 设计师:上身试试 返回首页