vue兄弟组件传值

需求:一个父页面包含搜索条件及已知两个table表格(左右布局)点击左侧数据行 传值给右面的表格

父组件调查询接口 将得到的数据 传给左侧的子组件table表格渲染,点击左侧数据行,拿到编号在传给右侧子组件table进行接口请求并渲染

父组件:

<template>
  <div>
    <button @click="query(e)">查数据</button>
    <!-- 子组件1 -->
    <FinishedAppearLeft
      v-if="show"
      :tabletData="listData"
      :load="loading"
    ></FinishedAppearLeft>

    <!-- 子组件2 -->
    <FinishedAppearRight
      v-if="show1"
      :tabletData1="listData1"
      :load1="loading1"
    ></FinishedAppearRight>
  </div>
</template>
<script>
// 引入子组件
import FinishedAppearLeft from './component/FinishedAppearLeft.vue'
import FinishedAppearRight from './component/FinishedAppearRight.vue'
export default {
  // 注册子组件
  components: {
    FinishedAppearLeft,
    FinishedAppearRight
  },
  data() {
    return {
      listData: [],
      listData1: [],
      loading: false,
      loading1: false,
      show: false,
      show1: false
    }
  },
  created() {

  },
  methods: {
    // 这里请求数据
    // 由于父组件和子组件通信时渲染  执行顺序父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted
    // 在子组件用watch监控父组件传递过来值得变化,设置deep:true (为了发现对象内部值的变化,可以在选项参数中指定 deep:true  注意监听数组的变化则不需要)
    // 在父组件使用(v-if)当请求结束后 改变(v-if)里变量的值
    query(e) {
      // .....代码省略  this.show = e
    }
  },
}
</script>
<style lang="scss" scoped>
</style>

eventbus.js:

import Vue from 'vue'
export default new Vue()

子组件1:

<template>
  <div>
    
  </div>
</template>
<script>
import bus from "../component/eventbus.js"
export default {
  // 父组件传过来的值
  props: {
    value: {
      type: Boolean,
      default: false
    },
    tabletData: {
      type: Array,
      default: function () { return [] }
    },
    load: {
      type: Boolean,
      default: function () { return false }
    }
  },

  data() {
    return {
      loading1: null,
      listData: [],
    }
  },
  watch: {
  // 对于传过来的 load加载状态 进行deep深度监听
    load: {
      handler(n, o) {
        this.loading1 = n
      },
      deep: true
    }
  },
  created() {
   // 赋值
    this.listData = this.tabletData
    this.loading = this.load
  },
  
  methods: {
   // 此处为兄弟组件传值
    dblclickApplicationApproval(row) {
      bus.$emit('share', row)
    }
  },
}
</script>

子组件2:

<template>
  <div>
    
  </div>
</template>
<script>
import bus from "../component/eventbus.js"
export default {
  data() {
    return {
      rightId: '',
    }
  },
  created() {
    bus.$on('share', (val) => {
      console.log("子组件1组件传过来的值为:", val)
      // this.rightId = val.PRODUCTION_ORDERS
    })
  },
 
  methods: {
    
  },
}
</script>