Vue2學習（2）

按鍵修飾符

還能夠自定義按鍵修飾符別名，經過全局 config.keyCodes 對象設置：

// 能夠使用 `v-on:keyup.f1`
Vue.config.keyCodes.f1 = 112

data 必須是一個函數

<div id="example-2">
  <simple-counter></simple-counter>
  <simple-counter></simple-counter>
  <simple-counter></simple-counter>
</div>

var data = { counter: 0 }

Vue.component('simple-counter', {
  template: '<button v-on:click="counter += 1">{{ counter }}</button>',
  // 嚴格來看 data 是一個函數，
  // 所以 Vue 不會警告，可是咱們爲每一個組件實例
  // 返回同一個對象的引用
  data: function () {
    return data
  }
})

new Vue({
  el: '#example-2'
})

因爲三個組件實例共享的是同一個對象，所以增長一個計數器，就會增長所有！嗯。讓咱們經過改成返回一個全新的數據對象，來解決下這個問題：

data: function () {
  return {
    counter: 0
  }
}

在 Vue 中，父子組件之間的關係能夠概述爲：props 向下，events 向上。父組件經過 props 向下傳遞數據給子組件，子組件經過 events 發送消息給父組件。