Vue组件通信

Vue 组件之间的通信,通常我们遇到的都是父子组件之间的通信

一、父子组件传参

  1. 子组件定义 Props 属性;
  2. 父组件再引用的子组件上绑定上相应的属性,子组件即可捕获父组件传递到自组件的值;
// 子组件(child.vue)
<template>
      <div>小灰的父亲让他去买 {{ product }} </div>
</template>
<script>
  export default {
      props: {
          product: {
             required: [true | false],
             type: [String | Number | Object | Boolean];
             default: [value | Function],
             validator: Function
          }
      }
  }
</script>

二、兄弟组件传参

方法一:EventBus

  // eventBus.js
  import Vue from 'vue';  
  export default new Vue();

方法二:Vue全局事件监听

// main.js 定义
Vue.prototype.$vm = new Vue();

// 组建中使用
this.vm.$emit(fun, data) // 事件触发
this.vm.$on(fun, (data) => {}) // 事件监听
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容