vue.js - 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()对象和{}对象的差异是什么，造成这种数据绑定不成功的原因是？

解决方案

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

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

这篇关于vue.js - export default new Vue({}) 在Vue-router中数据绑定失效的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！