Vue17_组件的data

最新推荐文章于 2022-10-26 17:07:31 发布

ParadoxLin

最新推荐文章于 2022-10-26 17:07:31 发布

阅读量114

点赞数

分类专栏： 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>

效果：
在这里插入图片描述

ParadoxLin

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue17_组件的data

1. 组件的data属性必须是一个函数；2. 而且这个函数必须返回一个对象，对象内部保存着数据；3. 组件中的data必须是函数而不是对象是为了防止组件多次使用时因共享同一个数据而导致“ 一改全改 ”，使用函数在return时会返回一个新的对象，使得各个组件的数据独立
复制链接

扫一扫