Vue.js 组件中data为什么必须是个函数

最新推荐文章于 2022-04-27 11:03:03 发布

你好像很好吃a

最新推荐文章于 2022-04-27 11:03:03 发布

阅读量911

点赞数 1

分类专栏： Vue.js

本文链接：https://blog.csdn.net/weixin_44296929/article/details/103576930

版权

Vue.js 专栏收录该内容

43 篇文章 5 订阅

订阅专栏

Vue.js中的data：

类型：Object | Function
限制：组件的定义只接受 function

那么为什么组件中定义的data只接受function呢？下面我们通过几个例子来说明一下：

<body>
    <div id="app">
        <counter></counter>
    </div>
    <template id="temp1">
        <div>
            <input type="button" value="+1" @click="increment">
            <h3>{{count}}</h3>
        </div>
    </template>
    <script type="text/javascript">
        var dataObj = {count: 0};
        Vue.component('counter',{
            template:'#temp1',
            data(){
                return dataObj
            },
            methods:{
                increment() {
                    this.count++
                }
            }
        })
        var vm = new Vue({
            el: "#app",
            data:{},
            methods: {}
        })
    </script>
</body>

简单的分析一下代码：

1、我们首先创建一个名字为counter的组件，如果直接给data属性设置一个对象而不是一个函数那么在浏览器中直接报错。
在这里插入图片描述
2、我们这里data函数中返回一个外部定义的对象的值，在浏览器中运行代码：

每次点击按钮，下面的值都会+1

3、如果我们在页面上同时使用三个counter组件：

<div id="app">
   <counter></counter>
   <hr>
   <counter></counter>
   <hr>
   <counter></counter>
   <hr>
</div>

在这里插入图片描述
点击任意一个按钮，三个数同时变化，因为它们都指向同一个对象，我们当然希望点击不同的按钮只实现当前组件内的数据变化，那么我们在函数中返回一个对象，每次创建一个组件的时候，在内存中同时开辟一块空间给当前组件存放data，这样就不会出现同一个data的现象。我们只需要将如上代码进行一点更改：

data: function (){
    //return dataObj
    return{
        count：0
    }
}

在这里插入图片描述
参考文章：https://www.cnblogs.com/zmyxixihaha/p/10660088.html

你要去做一个大人，不要回头，不要难过。

“这世上没有平白无故的闪闪发光。”

你好像很好吃a

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录