Vue之父与子间的通信

一、父组件向子组件传递信息:

(1)父组件

1.在父模块的子组件标签上传递参数CompontentA。

<compontent-a fromfather="I am father!"></compontent-a>

2.使用import引入子组件
3.使用compontents注册子组件components: { CompontentA }

(2)子组件

1.在子组件中通过props接收父组件传递来的数据props: ['fromfather']。
2.在子组件内通过this.fromfather访问。

二、子组件向父组件传递信息:

(1)子组件

1.在子组件中触发clickMe函数时通过emit发送数据

clickMe () {
	this.$emit('sonToFather', this.msg1)//1.第一个参数是父组件中自定义的事件类型。2.第二个参数是子组件中要发送的数据。
}

(2)父组件

1.在父模块的子组件标签上自定义事件类型和自定义事件

<compontent-a v-on:sonToFather="listenSon"></compontent-a>

2.使用import引入子组件
3.使用compontents注册子组件components: { CompontentA }
4.可以在函数listenSon中直接使用从子组件传递来的数据msg

listenSon(msg) {
    console.log(msg)
}