export default new Vue({}) 在Vue-router中数据绑定失效的问题

请教一下大家,我在weex的工程里使用了vue2.0 + vue-router
然而调试的时候数据绑定不成功,控制台报错信息和代码如下

<template>
  <text style="...">{{target}}</text>

</template>


<script>
export default new Vue({
   
 name: 'home',
        data () {
            return {
                target:'hello!',
            }
        },
})
</script>

vue.runtime.js:436 [Vue warn]: Property or method "target" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.

当我将代码中的
export default new Vue({...}
改为
export default {...}
后,绑定正常,请问以下vue-router中,import出一个 new Vue()对象和{}对象的差异是什么,造成这种数据绑定不成功的原因是?

阅读 6.4k
1 个回答

如果你在这边如果export default new Vue之后,在外部import的时候,获取的是一整个Vue实例,而在全局main.js中,Vue初始化时,就变成了new Vue(new Vue{ ... }),而Vue()里面只是需要一个配置对象而已,而并非一个Vue对象。

如果你export default {},外面引入的就是个纯对象,那在全局Vue初始化时候,用的就是new Vue({ ... }),这才是正确的操作。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题