vue组件间通信方式

一、props+$emit

将要传递的参数绑定到组件上，子组件通过props接受参数；

props: {
  mode: String,
  json: Object,
},

子组件通过事件传递给父组件

this.$emit("functionName","值")

只适用于父子

二、$on+$emit

无差别轰炸，想隔几层隔几层传

第一步新建js

import Vue from 'vue';
// 使用 Event Bus
const bus = new Vue();
export default bus;

第二步全局引用

import bus from "./components/common/bus";

Vue.prototype.$bus = bus;

第三步组件内使用

//传
this.$bus.$emit("collapse-content", msg);
//接
this.$bus.$on("collapse-content", (msg) => {
  this.collapse = msg;
});

三、本地存储

四、vuex

五、ref+$refs[‘val’]+$parent

组件上添加ref属性并赋值

ref="table"

在当前组件通过

this.$ref[ref属性的值]

this.$ref[ref属性的值].$ref[ref属性的值]

如果子组件下还有子组件可以一直好下去，同理

this.$parent

this.$parent.$parent