本文已参与「新人创作礼」活动，一起开启掘金创作之路。
四、自定义事件
1、事件名：
始终使用 kebab-case 的事件名，触发的事件名需要完全匹配监听这个事件所用的名称
2、v-model
一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的event，输入的值会传入prop中。
3、将原生事件绑定到组件
在一个组件的根元素上直接监听一个原生事件，使用.native修饰符
<base-input v-on:focus.native="onFocus"></base-input>
Vue 提供了一个 $listeners 属性，它是一个对象，里面包含了作用在这个组件上的所有监听器。
4、子向父传值.sync
子组件更新数据通过事件触发，父组件可以监听子组件更新数据，通过.sync修饰符实现这种模式
<text-document v-bind:title.sync="doc.title"></text-document> //不能用表达式
五、插槽
在templ中写入<slot></slot>，可以插入任何模板代码，包括HTML、其他组件
1、编译作用域
父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。
2、后备内容：在没有提供内容的时候渲染，可以将默认内容放入<slot></slot>标签对内。
3、具名插槽
有时我们需要多个插槽，<slot> 元素的特性：name可以用来定义额外的插槽：
<header> <slot name="header"></slot> </header>
<footer> <slot name="footer"></slot> </footer>
在向具名插槽写内容时，可以在一个 <template> 元素上使用 v-slot指令，参数为slot的名称：
<template v-slot:header> a page title </template>
没有v-slot指令，则被视为默认插槽内容。v-slot 只能添加在一个 <template> 上
4、作用域插槽
让插槽内容能够访问子组件中才有的数据（假设user）可以将user作为<slot>元素的一个特性绑定上去。
<span>
<slot v-bind:user="user"> {{ user.lastName }} </slot>
</span>
此特性被称为插槽prop，在父级作用域中，给v-slot带一个值来定义插槽prop名字
<current-user v-slot:default="slotProps">
{{ slotProps.user.firstName }}
</current-user> //独占默认插槽的缩写语法，:default也可省略
注意默认插槽的缩写语法不能和具名插槽混用，因为它会导致作用域不明确。
只要出现多个插槽，就始终为所有的插槽使用完整的基于 <template> 的语法。
5、解构插槽prop
v-slot 的值可以是任何能够作为函数定义中的参数的 JavaScript 表达式。
<current-user v-slot="{ user }"> </current-user> //可以插入具体的插槽prop
<current-user v-slot="{ user: person }"> </current-user> //可以prop重命名
<current-user v-slot="{ user = { firstName: 'Guest' } }"> </current-user> //可以定义后备内容
6、动态指令参数也可用在v-slot上，来定义动态的插槽名。
v-slot：可以缩写成#，该缩写只在其有参数的时候才可用，即必须始终以明确插槽名取而代之。如 v-slot：header → #header
