data
Vue 实例的数据对象。Vue 将会递归将 data 的属性转换为 getter/setter，从而让 data 的属性能够响应数据变化。对象必须是纯粹的对象 (含有零个或多个的 key/value 对)。
实例创建之后，可以通过vm.$data访问原始数据对象。Vue实例也代理了对象上所有的属性，因此访问vm.a等价于vm.$data.a。
当一个组件被定义，data 必须声明为返回一个初始数据对象的函数，因为组件可能被用来创建多个实例。如果 data 仍然是一个纯粹的对象，则所有的实例将共享引用同一个数据对象！通过提供 data 函数，每次创建一个新实例后，我们能够调用 data 函数，从而返回初始数据的一个全新副本数据对象。
可以想象原型。
// Vue.extend() 中 data 必须是函数
var Component = Vue.extend({
data: function () {
return { a: 1 }
}
/*
等价于 data(){
return { a: 1 }
}
*/
})
注意，如果你为 data 属性使用了箭头函数，则 this 不会指向这个组件的实例，不过你仍然可以将其实例作为函数的第一个参数来访问。
data: vm => ({ a: vm.myProp }) //可以访问vm的属性
data: () => { this.a } //this并不指向vm
props
使用props传递数据作用域是孤立的，它是父组件通过模板传递而来，想接收到父组件传来的数据，需要通过props选项来进行接收。
子组件需要显示的声明接收父组件传递来的数据的数量，类型，初始值。
简单的接收可以通过数组的形式来进行接收。
父组件通过在子组件模板中用v-bind即:来传递子组件中需要接收的数据
父组件
<template>
<div>
<demo :msg='msgData' :math = 'mathData' ></demo>
</div>
</template>
<script>
export default {
data () {
return {
msgData:'从父组件接收来的数据',
mathData : 2
}
},
components : {
Demo
}
}
</script>
子组件
export default {
name: 'demo',
props: [ 'msg' , 'math']
}
语法：:msg = msgData
- msg必须要与子组件的props同名
- msgData则是父组件中想子组件传递的数据，一个变量,中转作用
在 data 选项中，当前实例（当前组件中改动）可以任意改变data选项里的数据，Vue传递数据时是基于数据单向流动，子组件不能改变当前实例中的 props 任何属性，需要通知父组件改变相应的值，重新改变。
类似水会从高向地处流，要想改变下游的水，需要从源头改变。
on,emit,v-on
每个 Vue 实例都实现了事件接口：
- 使用
$on(eventName)监听事件vm.$emit( event, […args] ) - 使用
$emit(eventName)触发事件vm.$on( event, callback )
$emit的(eventName)和$on的(eventName)是一一对应的。
$emit和 $on 必须都在实例上进行触发和监听。
父组件可以在使用子组件的引入模板直接用 v-on 来监听子组件($emit)触发的事件。
v-model（语法糖）
<input v-model="something">
不过是以下示例的语法糖：
<input
v-bind:value="something"
v-on:input="something = $event.target.value">
既然在元素上能进行双向绑定，那在组件中进行双向绑定又如何实现，原理其实都是一样的，只是应用在自定义的组件上时，拿的并不是$event.target.value，因为我此时不作用在 Input 输入框上。
<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，而是回调函数中的第一个参数。
checkbox 和 radio 原理
<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 触发事件原理绑定是一样的。
网友评论