父组件传值给子组件
1.在父组件的子标签中写自定义属性,在子组件中用props接收
父组件
//在父组件的子标签中写自定义属性
<child :type="type1" ></child>
//type1和它的值写入父组件的data中
子组件
//用props接收
props: {
//type 在父组件的子标签中写的自定义属性
type: {
type: [Array], //type不可以改变
default: () => { //默认值
return [1, 2]
}
}
},
子组件传值给父组件
子组件传值给父组件的方法:
1.在父组件中给引用的子组件注册一个事件(这个事件的名字是自定义的)
2.子组件可以触发这个事件$emit('事件名字')
子组件给父组件传递数据:
1.$emit方法第二个参数可以定义子组件给父组件传递的内容
2.在父组件中怎么拿到这内容
2.1父组件这个方法没有自定义参数,在父组件的方法直接加这个参数就可以拿到
2.2父组件有自定义参数,可以传入$event也可以拿到子组件传递的数据.通过$event只能传递第一个参数.
没有自定义参数时
// 1.在父组件中给引用的子组件注册一个事件(这个事件的名字是自定义的)
<child @tofather="tofather"></child>
//接收来自子组件的传值
tofather(data) {
console.log(data);
}
//子组件用$emit传值
created() {
this.$emit('tofather', { name: 'zs', age: 18 })
}
有自定义参数时
两处改动
<child @tofather="tofather('自定参数','传递的参数')"></child>
tofather(data,data1) {
console.log(data);
console.log(data1);
}