Vue.js基础教程之挂载选项data必须是函数

使用组件时,大多数可以传入到 Vue 构造器中的选项可以在 Vue.extend() 或Vue.component()中注册组件时使用,但有一个重要前提: data 必须是函数

正确的写法:

 

 Vue.component('my-component', {

        template: '#myTemplate',

        data: function () {

            return {

                message: '你好,中国'

            }

        }

    })

 

注意:如果data选项指向某个对象,这意味着所有的组件实例共用一个data。

我们应当使用一个函数作为 data 选项,让这个函数返回一个新对象。

运行结果,这三个组件共享了同一个 data , 因此增加一个 counter 会影响所有组件!

解决办法:为每个组件返回新的 data 对象来解决这个问题!

 

data: function () {

            return {

                counter: 0

            }

        }

 

版权申明:本站文章均来自网络,如有侵权,请联系01056159998 邮箱:itboby@foxmail.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

中国领先的互联网域名及云服务提供商

为您提供域名,比特币,P2P,大数据,云计算,虚拟主机,域名交易最新资讯报道

域名注册云服务器