【摘要】在vue中,父子组件的关系可以总结为prop向下传递,事件向上传递。
作者:星星
【正文】
在vue中,父子组件的关系可以总结为prop向下传递,事件向上传递。父组件通过prop给子组件下发数据,子组件通过事件给父组件发送信息。
一、父组件向子组件传值
1、父组件向子组件传递静态值(child 是子组件)
2、父组件向子组件传递动态值
其中post是在父组件中定义的对象,post.type是可以动态更改的值
3、子组件接受父组件的传值
export default { props: { title: { type: String,//表示接受的值是什么类型,这个字符串类型 } } }
props的type数据类型可以是
String 字符串 Number 数字 Boolean 布尔 Array 数组 Object 对象 Date 日期 Function 函数
props其他属性
default : (默认值)
required: (必填项)
validator: 校验(验证传入的值是否符合规定
如:
props: {
A: Number,//数字类型
B: [String, Number], // 多个可能的类型
C: {
type: String,
required: true, // 必填的字符串
},
D: {
type: Number,
default: 100,// 带有默认值的数字
},
E: {
type: Array,
default: function () {
return ["张三"];// 带有默认值的数组
}, },
F: {
type: Object,
default: function () {
return { message: "hello" };// 带有默认值的对象
}, },
G: {
validator: function (value) {
return ["success", "warning", "danger"].indexOf(value) !== -1;// 自定义验证函数
},
},
},
二、子元素向父元素传值
1、父组件在组件上定义了一个自定义事件childFn,事件名为parentFn用于接受子组件传过来的message值。
子组件传来的值 : {{message}}
export default {
data: { message: '' },
methods: {
parentFn(msg) {
this.message = msg;
}
}
}
2、子组件是一个buttton按钮,并为其添加了一个click事件,当点击的时候使用$emit()触发事件,把message传给父组件。
Send
export default {
data() {
return { message: '我是来自子组件的消息' } },
props: {
'title':String,
},
methods: {
click() {
this.$emit('childFn', this.message);
}
}
}
3、子组件向父组件传递多个值
this.$emit('childFn',this.message1,this.message2,this.message3);
parentFn(payload1,payload2,payload3) {
this.message1 = payload1;
this.message2 = payload2;
this.message3 = payload3;
}
三、子组件调用父组件方法
1、直接在子组件中通过this.$parent.event来调用父组件的方法
点击
export default {
methods: {
childMethod() {
this.$parent.fatherMethod();//fatherMethod是父组件的方法
}
}
};
2、子组件里用$emit向父组件触发一个事件,父组件监听这个事件,类似子组件向父组件传值
3、父组件把方法传入子组件中,在子组件里直接调用这个方法,类似父组件向子组件传值
四、父组件调用子组件方法
1、在父组件中:首先要引入子组件 import Child from './child';
2、 是在父组件中为子组件添加一个占位,ref="mychild"是子组件在父组件中的名字
3、父组件中 components: { child :child }声明子组件在父组件中的名字
4、在父组件的方法中调用子组件的方法, this.$refs.mychild.parentHandleclick();