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');
            },
        }
    
    // 直接调用
    
    

父子组件方法调用

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

你可能感兴趣的:(eventBus传值、js或html调用vue方法、父子方法调用)