创建子组件公用的空vue变量,为pubVue,并传给需要互相传参/互相调用方法的两个子组件

  1. <template>
  2.   <div>
  3.     <btn-tools :pubVue="pubVue" />
  4.     <table-list :pubVue="pubVue" />
  5.   </div>
  6. </template>
  7.  
  8. <script>
  9. // 组件引用
  10. import TableList from './components/table-list'
  11. import BtnTools from './components/btn-tools'
  12. import Vue from 'vue'
  14. export default {
  15.   name: 'PDmaterialList',
  16.   components: { TableList, BtnTools },
  17.   data() {
  18.     return {
  19.       pubVue: new Vue()
  20.     }
  21.   }
  22. }
  23. </script>
  1. <template>
  2.   <div>
  3.     <el-button icon="el-icon-search" type="primary" @click="test" />
  4.   </div>
  5. </template>
  6.  
  7. <script>
  8. export default {
  9.   props: {
  10.     pubVue: {
  11.       type: Object
  12.     }
  13.   },
  14.   methods: {
  15.     test() {
  16.       console.log('方法派发')
  17.       this.pubVue.$emit('YOUR_EVENT_NAME', {
  18.         name: '张三'
  19.       })
  20.     }
  21.   }
  22. }
  23. </script>
  1. <template>
  2.   <div>
  3.     <div>子组件二</div>
  4.   </div>
  5. </template>
  6.  
  7. <script>
  8. export default {
  9.   props: {
  10.     pubVue: {
  11.       type: Object
  12.     }
  13.   },
  14.   mounted() {
  15.     this.pubVue.$on('YOUR_EVENT_NAME', data => {
  16.       console.log('方法监听', data)
  17.     })
  18.   }
  19. }
  20. </script>

vue 事件派发和监听 （两种方法）
vue2中$emit $on $off实现组件之间的联动，绝对有你想了解的

版权声明：本文为lvxhs原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/lvxhs/p/13915316.html