VueJs 2發出自定義事件觸發，但未被“聽到”

Question

可能不可能，但是我有一個擴展了Vue / VueComponent的對象（都嘗試了），該對象$emits通常會在其父級捕獲的自定義事件。

請參閱此筆： https : //codepen.io/anon/pen/MvmeQp?editors=0011並觀看控制台。

class nonVueComponent extends Vue {
  constructor(age,...args){
    super(args)
    console.log('new Blank Obj')

    setTimeout(() => {
      console.log('customEvent event does fire, but nothing hears it. Probably because it isnt in the DOM?', age)
      this.$emit('customEvent', `custom event from nonVueComponent...${age}`)  
    },500)

  }
}

Vue.component('test', {
  template: `<div>
               {{content}}
                <child :childAge="age" @customEvent="customEvent"></child>
                <child-secondary @secondaryEvent="customEvent"></child-secondary>
  </div>`,  
  props: {},
  data () {
    return {
      content: 'hello from component!',
      age : 20
    }
  },
  methods : {
    customEvent(data){
      console.log('PARENT: custom event triggered!', data)
      this.content = data
    },
    secondaryEvent(data){
      console.log('PARENT: !!secondary custom event triggered', data)
      this.content = data
    }
  }
})

Vue.component('child',{
  template: `<div>+- child {{childAge}}</div>`,
  props: ['childAge'],
  data () {
    outsideOfVue: new nonVueComponent(this.childAge)
  }
})

Vue.component('child-secondary',{
  template: `<div>+- secondary event</div>`,
  mounted(){
    setTimeout( ()=>{
      this.$emit('secondaryEvent', 'from secondary event....')  
    },125 )
   }
})

let vm = new Vue({ el: '#app'})

除了使用eventBus之外，還有其他方法可以從<child>發起和發起事件嗎？ 也許使nonVueComponent成為mixin？

謝謝。

Answer 1

代碼： https ： //codepen.io/anon/pen/EvmmKa？editors = 0011

發出事件的對象應該是第二輔助對象的實例。 嘗試將實例傳達給nonVueComponent的構造函數。

class nonVueComponent extends Vue {
  constructor(age,comp,...args){
    super(args)
    console.log('new Blank Obj')

    setTimeout(() => {
      console.log('customEvent event does fire, but nothing hears it. Probably because it isnt in the DOM?', age)
      comp.$emit('customEvent', `custom event from nonVueComponent...${age}`)  
    },500)

  }
}