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

Question

我想从实例外部访问 vm 数据，如下所示：

myComponent.vue

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

主文件

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>