Vue17_组件的data

最新推荐文章于 2024-06-03 14:34:42 发布

ParadoxLin

最新推荐文章于 2024-06-03 14:34:42 发布

阅读量135

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/linxwx/article/details/114106426

版权

Vue 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

前言：组件无法访问Vue实例中的数据，因为组件是一个单独功能模块的封装，组件有属于自己的Html模板，因此也有属于自己的数据data

1. 组件的data

组件自己的数据存放在data中：

组件的data属性必须是一个函数
而且这个函数必须返回一个对象，对象内部保存着数据

在这里插入图片描述

PS. 组件很像一个Vue实例，很多Vue实例有的东西组件都有

2. 为什么组件中的data必须是函数而不是对象

为了防止组件多次使用时因共享同一个数据而导致“ 一改全改 ”，使用函数在return时会返回一个新的对象，使得各个组件的数据独立

<body>
  <div id="app">
    <mycpn></mycpn>
    <mycpn></mycpn>
    <mycpn></mycpn>
  </div>

  <template id="tem">
    <div>
      <h2>当前计数为：{{ msg }}</h2>
      <button @click="decrement">-</button>
      <button @click="increment">+</button>
    </div>
  </template>

</body>


<script>
  // 1. 全局组件
  // Vue.component('mycpn', {
  //   template: "#tem",
  //   data() {
  //     return {
  //       msg: 0
  //     }
  //   },
  //   methods: {
  //     decrement() {
  //       this.msg--
  //     },
  //     increment() {
  //       this.msg++
  //     }
  //   },
  // })
  new Vue({
    el: "#app",
    // 2. 局部组件
    components: {
      'mycpn': {
        template: "#tem",
        data() {
          return {
            msg: 0
          }
        },
        methods: {
          decrement() {
            this.msg--
          },
          increment() {
            this.msg++
          }
        }
      }
    }
  })
</script>