vue组件中data为什么是一个function？

最新推荐文章于 2023-11-29 14:32:21 发布

AdleyTales

最新推荐文章于 2023-11-29 14:32:21 发布

阅读量1.2k

点赞数

分类专栏： Vuejs

本文为博主原创文章，未经博主允许不得转载。 Email: adleytales@126.com

本文链接：https://blog.csdn.net/adley_app/article/details/95939885

版权

Vuejs 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

如果data不是一个function，就如下面中，data是一个对象，在全局。这样，当父组件中插入多个子组件的时候，由于对象的引用问题，点击一个组件，其他的组件的数据也会跟着改变，这就是为什么data一定要用function的原因，保证每一个组件data都是新创建的数据对象。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

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

<template id="com1">
    <div>
        <button @click="add">点击+1</button>
        <div>{{count}}</div>
    </div>
</template>

<script src="./vue.min.js"></script>
<script>

    let obj = {count: 0}; 

    Vue.component('counter', {
        template: '#com1',
        data() {
          return obj;
        },
        methods: {
            add(){
                this.count++;
            }
        }
    });

    let vm = new Vue({
        el: '#app'
    });
</script>
</body>
</html>