如何从 Vue js 中的实例外部访问数据？

Question

我想像这样从实例外部访问 vm 数据：

myComponent.vue

export default {
    data() {
        return {
            name: 'Joe'
        };
    }
}

ma​​in.js

var vm = new Vue({
    el: '#app',
    render: h => h(myComponent)
});

期望的结果

console.log(vm.name);   // should return - Joe

由于某种原因，控制台返回未定义。我做错了什么？

Answer 1

要从内部访问 vue.js 对象数据，您可以使用 $property_name。示例

var vm = new Vue({
    el: '#app',
    data() {
      return {
        name: "Kapucni",
      }
    },
  template: '<div>{{ name }}</div>'
});

// use $name .property
console.log(vm.$data.name);
console.log(vm.$el);
// calling functions from $method, etc ...

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>

<div id='app'>
  
</div>

Answer 2

感谢 ittus 的 cmets，我意识到我必须寻找子组件，而不是根组件。

我们可以像这样访问子组件：

vm.$children[0].name

其中 $children[0] 是根组件的直接（在这种情况下也是第一个）子组件。