vue 跨组件传参

第一种 this.$emit()，子组件向父组件传参

首先在子组件加上点击事件触发才能传参，

// 子组件
<template>
  <div class="title">
    <button @click="btn()">提交</button>
  </div>
</template>

<script>
export default {
  methods: {
    btn () {
      this.$emit('get', 123)
    }
  }
}
</script>

// 父组件
<template>
  <div>
       // 子组件
    <Title @get='get' />
    子组件传参{{title}}
  </div>
</template>

<script>
export default {
  data () {
    return {
      title: ''
    }
  },
  methods: {
    get (val) {
      this.title = val
    }
  }
}
</script>

 第二种，跨组件传参

// 在main.js文件中挂载 $bus
Vue.bus = Vue.prototype.$bus = new Vue();

// 发射事件，进行传参
this.$bus.$emit("search", {
          orgId: this.orgId,
          projectType: this.projectType,
          projectYear: this.yearSelection,
        });

// 监听事件，获取参数
this.$bus.$on("search", (params) => {
     this.params = params;
    });