Question

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

main.js

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

console.log(vm.name);   // returns undefined

myApp.vue

export default {
    data() {
        return {
            name: '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的评论，我意识到我必须寻找子组件，而不是根组件。

我们可以像这样进入子组件：

vm.$children[0].name

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

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

2 个答案: