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 发送消息给父组件。