通过vue-loader的方式创建的vue实例怎么拿到里面的data数据

Question

通过vue-loader的方式创建的vue实例怎么拿到里面的data数据

index.vue的代码

import app from './pageA.vue';
...
window.myvue = new Vue({
    el: '#app',
    store,
    router,
    render: h => h(app)
});

pageA.vue的代码

<template></template>
<script>
export default {
        data: function () {
            return {
                aaa: 'aaaa', // 想要访问的数据
                bbb: 'aaaaaaa'
            };
        }
        ...
}
</script>

想通过myvue访问 pageA.vue里面的data数据aaa，怎么访问呢，直接myvue.aaa会找不到

Answer 1

你可以在控制台打印下myvue看下数据结构

vue中的子组件都是通过$children一层层管理的，如果app是实例的直接子元素(比如你这个例子)，那么你可以使用myvue.$children[0].aaa来访问，如果是子元素的子元素，那么就要多找几层了，一般的，可以封装一个方法，递归查找

Answer 2

window.myvue = new Vue(app).$mount('#app');
window.myvue.aaa