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

Question

我想像这样从实例外部访问虚拟机数据：

myComponent.vue

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

main.js

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

想要的结果

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

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

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 的评论，我意识到我必须寻找子组件，而不是根组件。

我们可以像这样获取子组件：

vm.$children[0].name

其中 $children[0] 是根组件的直接（在本例中为第一个）子组件。

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

How to access data from outside the instance in Vue js?

vuejs2

vue-cli