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

尼古拉夫斯7 lv.1

发布时间：2022-10-23 13:38:59 329

相关标签： # html# 数据

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


<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>

文章来源： https://blog.51cto.com/u_12836588/5760795

特别声明：以上内容（图片及文字）均为互联网收集或者用户上传发布，本站仅提供信息存储服务！如有侵权或有涉及法律问题请联系我们。