eventBus传值、js或html调用vue方法、父子方法调用

使用eventBus传值

• 新建eventBus.js

  import Vue from 'vue'
  // 用于监听、触发事件
  export default new Vue()
  

• 在传值的两个文件中引入

  import eventBus from './utils/eventBus'
  

• 父组件发布

  eventBus.$on('getCLG', target => {
      console.log('Test')
    })
  

• 子组件接收

  eventBus.$emit("getCLG")`
  

js或者html调用vue页面里的方法

• 需要将方法挂载到window下面

  mounted() {
          // 将vue中的方法赋值给window
         window.selectUser = this.selectUser;
      },
      methods: {
          selectUser() {
             console.log('selectUser');
          },
      }
  
  // 直接调用
  <input type="button" class="btn-select" value="选择" onclick="selectUser()"/>
  

父子组件方法调用

子调父方法

• this.$parent.func()
• 跟子父传值一样，$emit("",)传参过去,两个参数，第一个是方法名，第二个是方法的参数
• 跟父子传值一样，父亲将方法传给子，子通过props接收，然后调用

父调子方法

• this.$ref.child.func()