vue组件之间的通信

7、vue 组件之间的通信

提示：

• 情况一：组件很多，且通信复杂 => 建议使用vuex;

• 情况二：组件不多 => 建议使用事件触发$emit 和监听 $on;

主要介绍情况二：

7.1 兄弟组件(或者 完全不相关的组件)

创建事件中心（即new vue()）

let Hub = new Vue();

组件1：触发

Hub.$emit('myClick'[, param ...]);

组件2：监听

Hub.$on('myClick', (param) => {console.log(param)});

7.2 父子组件

事件

子组件触发父组件中的事件

子组件child 触发：

let vm = this;

vm.$emit("myClick"[, param ...]); 或者 vm.$emit("my-click"[, param ...]);

父组件parent 监听：

<child @myClick="handleClick"></child>

handleClick(param1) {console.log(param)}; // 接收参数param1

父组件调用子组件中的事件

<child ref="child"></child>

callChildEvent() {

let vm = this;

vm.$refs.child.childEvent();

}

数据

父组件调用子组件数据

<child ref="child"></child>

callChildEvent() {

let vm = this;

vm.$refs.child.childData;

}

父组件向子组件传递数据

父：<child :pass-data="passData"></child>

子：三种方式接收数据

A1:props: ['passData']

A2:props: {passData: String} // 需要制定类型

A3:props: {passData: {type: String, default: '123'}} // 需要制定默认值