vue 事件调用 传参_vue 父子组件通信传参

【摘要】在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

{{title}}

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();