我在app.js
中定义了这样的Vue.js实例:
const vm = new Vue({
el: '#app',
data: {
page: 'welcome'
}
});
并使用Laravel的默认webpack脚本:
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css');
Vue在组件显示时正确加载,Vue开发人员插件显示适当的数据。
但是,在开发人员控制台和页面上的脚本中vm
未定义
例如,在加载Vue组件的页面上
<script>
console.log(vm); // Error: vm is not defined.
</script>
如何访问Vue实例?我想设置一个数据属性。
答案 0 :(得分:3)
要具有灵活性并使用任何名称导入,您可以使用默认导出。
在 app.js :
export default new Vue({
el: '#app',
data: {
page: 'welcome'
}
});
在其他.js 文件中:
import whateverName from './app';
当然,根据文件的位置调整./app
。
答案 1 :(得分:2)
我能够使用
export {
vm
};
require('./main');
并在main.js
import {vm} from './app';