VueJS 从实例访问组件答案

【问题标题】：VueJS accessing components from instanceVueJS 从实例访问组件
【发布时间】：2017-01-04 11:53:22
【问题描述】：

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

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

它直接在我的#app 内部，并让它从我的组件Live.vue 内部启动live 方法我在ver 2.x 之前找到了大量关于broadcast 和dispatch 的文档，但是在尝试使用$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')
     }
   }
})

我已经用 Vuex 做了一个“解决方法”，但我不需要为了让它工作而复杂化我的学习曲线。

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

【问题讨论】：

我想我能帮助你，但你能解释得更好吗？功能怎么能在button里面？
另外，您必须在开头定义loaded。您正在使用它，但它没有定义。您应该将其定义为假。此外，您不应在模板中的根 div 上使用 v-if
我已经定义了它，只是没有复制粘贴我的代码并编写它以跳过与问题无关的部分。至于它应该做什么，这是不言自明的。当您单击按钮时，它会在我放置组件标签的地方显示 div 显示“实时” - 它是内部文本而不是我在括号内粘贴了一些内容的函数。我会尽快使它更具可读性。
你能创建快速的 jsfiddle 吗？那我来帮你。
对我来说，看起来您正在尝试使用没有 webpack 的单文件组件。请创建 jsfiddle，我会帮助你

标签： vue.js vue-component vuejs2

【解决方案1】：

你可以在这里找到固定的小提琴：https://jsfiddle.net/gr9c6h64/

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

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

【讨论】：

问题是我无法从组件内部操作组件道具，因为再次渲染组件时道具会被覆盖。这就是为什么我一直在寻找一种从组件外部访问组件数据或方法的方法。这是一个很好的解决方法，但我真的不能让它这样工作。
我认为你错了。看看这个：jsfiddle.net/gr9c6h64/2 刚刚添加了 v-model 的输入以向您显示数据已保留。重新渲染不会丢弃数据。这不是解决方法，应该这样做。请说明您还需要什么
我想我明白了，你是对的。它可能会完成这项工作。但是以后它会变得非常混乱（在这样做之前我从未考虑过的一件事），我可能仍然会使用我已经做过的 Vuex 实现。很高兴知道它可以用道具来完成。