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，就會造成一個變了全都會變的結果。