Vue

Vue 实例的数据对象。Vue 将会递归将 data 的属性转换为 getter/setter，从而让 data 的属性能够响应数据变化。对象必须是纯粹的对象 (含有零个或多个的 key/value 对)。

实例创建之后，可以通过vm.$data访问原始数据对象。Vue实例也代理了对象上所有的属性，因此访问vm.a等价于vm.$data.a。

当一个组件被定义，data 必须声明为返回一个初始数据对象的函数，因为组件可能被用来创建多个实例。如果 data 仍然是一个纯粹的对象，则所有的实例将共享引用同一个数据对象！通过提供 data 函数，每次创建一个新实例后，我们能够调用 data 函数，从而返回初始数据的一个全新副本数据对象。
可以想象原型。

1
2
3
4
5
6
7
8
9
10
11

// Vue.extend() 中 data 必须是函数
var Component = Vue.extend({
  data: function () {
    return { a: 1 }
  }
/*
等价于 data(){
  return { a: 1 }
}
*/
})

注意，如果你为 data 属性使用了箭头函数，则 this 不会指向这个组件的实例，不过你仍然可以将其实例作为函数的第一个参数来访问。

1
2

data: vm => ({ a: vm.myProp })  //可以访问vm的属性
data: () => { this.a }  //this并不指向vm

使用props传递数据作用域是孤立的，它是父组件通过模板传递而来，想接收到父组件传来的数据，需要通过props选项来进行接收。
子组件需要显示的声明接收父组件传递来的数据的数量，类型，初始值。
简单的接收可以通过数组的形式来进行接收。
父组件通过在子组件模板中用v-bind即:来传递子组件中需要接收的数据

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

父组件
<template>
   <div>
      <demo :msg='msgData' :math = 'mathData' ></demo>
   </div>
</template>
<script>
 export default {
     data () {
       return  {
          msgData:'从父组件接收来的数据',
          mathData : 2
       }
     },
     components : {
       Demo
     }
   }
</script>

1
2
3
4
5

子组件
export default {
  name: 'demo',
  props: [ 'msg' , 'math']
}

语法：:msg = msgData

• msg必须要与子组件的props同名
• msgData则是父组件中想子组件传递的数据，一个变量,中转作用

在 data 选项中，当前实例（当前组件中改动）可以任意改变data选项里的数据，Vue传递数据时是基于数据单向流动，子组件不能改变当前实例中的 props 任何属性，需要通知父组件改变相应的值，重新改变。
类似水会从高向地处流，要想改变下游的水，需要从源头改变。

每个 Vue 实例都实现了事件接口：

• 使用$on(eventName)监听事件 vm.$emit( event, […args] )
• 使用$emit(eventName)触发事件 vm.$on( event, callback )
$emit的(eventName)和$on的(eventName)是一一对应的。

$emit和 $on 必须都在实例上进行触发和监听。

父组件可以在使用子组件的引入模板直接用 v-on 来监听子组件($emit)触发的事件。

1

<input v-model="something">

不过是以下示例的语法糖：

1
2
3

<input
  v-bind:value="something"
  v-on:input="something = $event.target.value">

既然在元素上能进行双向绑定，那在组件中进行双向绑定又如何实现，原理其实都是一样的，只是应用在自定义的组件上时，拿的并不是$event.target.value，因为我此时不作用在 Input 输入框上。

1
2
3
4

<custom-input
  v-bind:value="something"
  v-on:input="something = arguments[0]">
</custom-input>

通过以上简写，通过自定事件让 v-model 进行一个父子组件双向绑定的话。
v-bind:value=’something’ 此时 value 是作为子组件接收的 props。
接收的只能是 value 吗？必须是，因为 v-model 是基于 Input 输入框定制的，其中value 值是为 Input 内部定制的
此时作用在组件上时，v-on 监听的语法糖也会有所改动，监听的并不是$event.target.value，而是回调函数中的第一个参数。

1
2
3

<input type="checkbox" :checked="status" @change="status = $event.target.checked" />

 <input type="radio" :checked="status" @change="status = $event.target.checked" />

通过绑定 checked 属性，同样的监听的是 change 事件，无论是 checkbox 还是 radio 在操作的时候都会隐式自动触发一个 change 事件，跟 Input 通过 value 值，Input 触发事件原理绑定是一样的。