1 - props
基础使用
通过属性的方式给子组件传递动态或静态数据
注意引用值的传递，传递的是地址，子组件内改变会导致父组件内也改变
-
注意标签名和特性名会被自动转换为小写，可使用
-分隔长的特性名，字符串模板内不存在此限制<chloe :name="name" age="20" da-sha="dasha"></chloe>props: ["name", "age", "daSha"]
-
使用
v-bind传递一整个对象<chloe v-bind="person"></chloe>props: ["name", "age", "daSha"]
限制类型
-
我们可以指定传递过来的
prop类型props: { chloe: String / Number / Boolean / Array / Object / Date / Function / Symbol / 自定义构造函数 / 前面这些组成的数组(表示满足其中一种即可) }注意，
null和undefined可通过任何类型的验证
还可以对
prop限定更多
props: {
name: {
type: String, 类型限定
default: "chloe", 默认值 若为对象则应使用函数返回值的形式 default() {} 防止组件多次调用却使用的是同一个默认值 类似 data() {}
required: true, 该prop是否必须要传
validator(prop) { 自定义验证函数 参数即为该prop的值 返回false则验证失败
return true;
}
}
}
单向数据流
父组件向子组件传递
props，子组件接收后不应任意直接对其进行修改，尤其是引用值。若随意修改则会导致你的数据流向相当混乱如果一定要改变，原始值可以直接用一个
data属性来接收，引用值则需深度克隆再接收
非prop特性
传递给了组件，却没有被组件接收的特性就是非
prop特性，事件除外-
非
prop特性会被直接挂到组件的根元素上<chloe :name="name" age="20"></chloe>props: [ "name" ]
替换 / 合并已有特性
<chloe type="text" class="a"></chloe>-
<input type="radio" class="b"></input>chloe组件的templatetype和class均未被组件接收，成为了非prop特性，挂到了组件的根元素input上除了
class和style会被合并，其余则是组件上的prop值替换根元素上的prop值
禁用非prop特性继承
-
如果不希望组件的根元素继承非
prop特性，可以给组件设置inheritAttrs: falseVue.component("chloe", { inheritAttrs: false })
$attrs
拿到组件上的所有非
prop特性，事件除外可以和
inheritAttrs: false配合使用，将这些非prop特性用到指定的元素上
2 - $emit
实现子组件向父组件传递数据
触发绑定到组件上的任意事件
$emit(事件名字符串，要传递的参数)因为事件名会被小写转换，所以推荐用
kebab-case形式命名，$emit时同样要用这个-
事件处理函数写在行间，可以使用
$event接收子组件传递来的参数<chloe @haha-lala="name = $event;"></chloe><button @click="$emit('haha-lala', 'chloe')">chloe</button>chloe组件的模板
-
也可将事件处理函数写在父组件
methods内，参数名可自定义<chloe @haha="changeName"></chloe>
3 - 组件上的v-model
语法糖而已
实现父子组件相互通信，一个组件只能用一次
v-model-
在子组件上绑定
v-model，传递数据，默认监听input事件，子组件中通过$emit触发事件<chloe v-model="searchText" />默认等价于下面这种形式<chloe :value="searchText" @input="searchText = $event" />
在子组件中接收value，并绑定事件
Vue.component("chloe", {
props: ["value"],
template: `
<input
:value="value"
@input="$emit('input', $event.target.value)"
/>
`
});
自定义监听事件类型及值
-
通过子组件中的
model属性来自定义model: { prop: "checked"，event: "change" }
4 - .sync
也是语法糖而已，
vue1.x时便存在，2.0移除，2.3回归-
与
v-model一样，.sync也是做双向数据绑定的，但.sync可以绑定任意属性<chloe :inp-val.sync="searchText"></chloe>等价于下面这种形式<chloe :inp-val="searchText" @update:inp-val="searchText = $event" />
在子组件中接收
value，并绑定事件
Vue.component("chloe", {
props: ["inpVal"],
template: `
<input
:value="inpVal"
@input="$emit('update:inp-val', $event.target.value)"
/>
`
});
-
一次设置多个
.sync属性<chloe v-bind.sync="obj" />
