VueJS 从实例访问组件

VueJS accessing components from instance

我正在寻找一种方法来从我的实例访问我的组件的方法

<button id="live" class="ui primary button" v-on:click.prevent="live">
    Live Text
</button>

它直接在我的 #app 中,并让它从我的组件 live 中启动一个方法 Live.vue 我在版本 [=32 之前找到了大量的文档=] 关于 broadcastdispatch,但是在尝试使用 $emit 让它工作一个小时后,我不确定我在做什么了..

<template>
  <div v-if="loaded">
    Live
  </div>
</template>

<script>
export default {
  data: function () {
    return {
      loading: false,
      loaded: false,
    }
  },
  methods: {
    load: function (event) {
      console.log('loading..')
      this.loaded = !this.loaded
    }
  },
  mounted: function () {
    // this.$on('liveClick', function (msg) {
    //   console.log(msg)
    // })
  },
  name: 'Live',
  props: {
    'id': Number,
    'key': String
  }
}
</script>

init.js(这是一个基于laravel的结构)

window.App = new Vue({
   el: '#app',
   methods: {
     live: function (event) {
       this.$emit('liveClick', 'msg')
     }
   }
})

我已经 'workaround' 使用 Vuex,但我不需要为了让它工作而使我的学习曲线复杂化。

jsfiddle: https://jsfiddle.net/c4s44qgy/1/

您可以在此处找到固定的 fiddle:https://jsfiddle.net/gr9c6h64/

基本上,当你想从主 Vue 实例向组件传递数据时,你必须像我在 fiddle: props: { loaded: String } 中所做的那样在这个组件中使用道具,然后从父级传递值使用 :loaded='isLoaded'

我不认为这正是您想要做的,但看起来这正是您遇到的问题。希望对您有所帮助!