Vue.js：组件的数据data存放

最新推荐文章于 2023-09-01 17:37:56 发布

ikunsdc

最新推荐文章于 2023-09-01 17:37:56 发布

阅读量2.4k

点赞数

文章标签： vue.js javascript

By ikunsdc

本文链接：https://blog.csdn.net/m0_55331605/article/details/114237469

版权

组件是一个单独功能模块的封装：既可以有属于自己的HTML模板，也可以有属性自己的数据data和方法methods。
组件中不能直接访问Vue实例中的data

一丶组件的数据存放

Vue组件有自己保存数据的地方：

组件对象中声明一个data属性

这个data属性必须是一个函数

而且这个函数的返回一个对象，对象内部保存着数据

组件data必须是函数

如果我们的data不是一个函数，函数不返回一个对象
不同复用处的组件的数据，都会随着一处的更改而全部都改，就没有独立性。

如果组件data使用函数，返回一个对象，对象中装数据
这样的话，每次复用引入该组件时，该组件的数据在都会独立开辟一个空间存储自己的数据，组件间相同数据，互不影响

总结：如果组件的data不是函数返回一个对象的话，该组件在不同处复用，复用的所有组件的数据，都会随着一处的更改而全部都改，就没有独立性

二、代码

<!--作者：ikunsdc-->
<!--开发时间：2021/02/28 19:53-->

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

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

<template id="cpn">
  <div>
    <h2>当前计数：{{counter}}</h2>
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
  </div>
</template>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  //1.注册全局组件
  Vue.component('cpn_count',{
    template:'#cpn',
    data(){
      return{
        counter:0
      }
    },
    methods:{
      increment(){
        this.counter++
      },
      decrement(){
        this.counter--
      }
    }

  })
  const app = new Vue({
    el:"#app",
    data:{

    }
  })
</script>
</body>
</html>