Vue 组件数据存放

组件数据存放

组件可以访问Vue实例数据吗?

• 组件是一个单独功能模块的封装：

  • 这个模块有属于自己的HTML模板，也应该有属性自己的数据data。

• 组件中的数据是保存在哪里呢？顶层的Vue实例中吗？

  • 我们先来测试一下，组件中能不能直接访问Vue实例中的data

<div id="app">
  <my-cpn></my-cpn>
</div>

<template id="myCpn">
  <div>数据： {{message}}</div>
</template>

<script>
  let app = new Vue({
    el:'#app',
    data: {
      message: 'Hello lazy'
    },
    components: {
      'my-cpn': {
        template: '#myCpn'
      }
    }
  })
</script>

• 我们用组件里的message去访问定义在Vue实例data中的数据，并没有效果
• 所以组件是不能直接访问Vue实例中的data数据
• 即使可以访问，如果将所有的数据都放在Vue实例中，Vue实例就会变的非常臃肿
• Vue组件应该有自己保存数据的地方。

组件数据的存放

• 组件自己的数据存放在哪里呢?
  • 组件对象也有一个data属性(也可以有methods等属性，下面我们有用到)
  • 只是这个data属性必须是一个函数
  • 而且这个函数返回一个对象，对象内部保存着数据

<div id="app">
  <my-cpn></my-cpn>
</div>

<template id="myCpn">
  <div>数据： {{message}}</div>
</template>

<script>
  let app = new Vue({
    el:'#app',
    components: {
      'my-cpn': {
        template: '#myCpn',
        data() {
          message: 'Hello lazy'
        }
      }
    }
  })
</script>

• 组件</my-cpn>访问了自己的data数据

为什么是一个函数呢?

• 为什么data在组件中必须是一个函数呢?
  • 当然，如果不是一个函数，Vue直接就会报错(皮一下)。
  • 组件是可复用的vue实例，一个组件被创建好之后，就可能被用在各个地方
  • 而组件不管被复用了多少次，组件中的data数据都应该是相互隔离，互不影响的
  • 基于这一理念，组件每复用一次，data数据就应该被复制一次，之后，当某一处复用的地方组件内data数据被改变时，其他复用地方组件的data数据不受影响
  • 组件中的data写成一个函数，数据以函数返回值形式定义，这样每复用一次组件，就会返回一份新的data，类似于给每个组件实例创建一个私有的数据空间，让各个组件实例维护各自的数据
  • 而单纯的写成对象形式，就使得所有组件实例共用了一份data，就会造成一个变了全都会变的结果。