3、组件自定义事件
1）、大小写的问题
vue官网很是强调这个问题呀，基本能说一次的都要说一次。中心思想就是要你使用kebab-case的命名方式。当然，希望大家注意，指的是事件名，而不是方法名。举一个简单的栗子吧
<base-span @my-event="fun1"></base-span> //父级调用代码，调用fun1方法，当然，也可以写一些简单的js表达式
fun1(){alert("help");} //fun1方法
this.$emit('my-event'); //子级触发方式，如果父级调用的fun1有参数，可在事件名后面添加要传入的参数
2）、v-model
v-model主要利用的是组件中的value属性和input事件，但是有时候，value值和input事件有其他的作用，比如单选框和复选框，这个时候我们就需要自定义v-model。主要引用的就是model属性，设置默认绑定的值和事件。上个官网的栗子：
Vue.component('base-checkbox', {
model: {
prop: 'checked',
event: 'change'
},
props: {
checked: Boolean //这个是必须要声明的
},
template: `
<input
type="checkbox"
v-bind:checked="checked"
v-on:change="$emit('change', $event.target.checked)"
>
`
}) //v-model绑定的值就是bool值了
3)、将原生事件绑定到组件
当我们调用一个组件时，比如说我想监控它原生的事件怎么办呢？在原生的事件后面加上.native,比如@focus.native=""。但是如果该组件的根元素没有focus事件，但是其他元素里面有，我们想监听那个元素的focus事件怎么办呢？使用$listeners属性，它和我们上篇谈到的$attrs差不多，只不过$attrs是包含了父级的所有属性，而$listeners是包含了父级所有的事件。使用方法也一样，直接绑定到你想绑定的元素上面，就可以调用对应的事件了。
<div><input v-on="$listeners"></div> //这是template中的代码，div代表根元素
4、组件的插槽
官网写了一大堆栗子，赶脚好重视的样子。但是我不重视，因为平常确实用的挺少。进入正题：
1）、概念和作用
官网说的额，有点笼统吧。顾名思义，插槽的作用就是在组件中插一个槽，也就是在组件中使用slot标签选择一个位置当作槽，在调用组件的时候，组件的开闭标签中间的位置就是槽口，在这个位置填上你想要写的代码，这段代码会出现slot标签标记的地方。插槽中间也能放组件啥的
<base-button>提交</base-button> //父级调用 <template><button><slot></slot></button></template> //子级组件，‘提交’会代替slot标签出现在button中
2）、后备内容和具名插槽
后备内容就是给slot标签中设置一个默认值，如果插槽中没有数据，该默认值就会出现。具名插槽就是给slot设置一个name属性，这样就能调不同的插槽了。没有设置name属性的默认name值是dafault。看下代码，效果是出现红色的数字1、黄色的数字2和蓝色的文字“蓝”。
<my-component><one>1</one><two>2</two></my-component> //父级调用
<template>
<span style="color:red"><slot name="one">红</slot></span>
<span style="color:yellow"><slot name="two">黄</slot></span>
<span style="color:blue"><slot name="three">蓝</slot></span>
</template>
3）、插槽的作用域
默认插槽中的代码，只能访问父级的变量和属性，是无法访问组件中的变量和属性的。但是，通过一些骚操作，是可以让插槽中的代码访问组件中的变量和属性的，由于太骚了，我就不说了，兴趣不大。
4）、动态插槽名，具名插槽缩写、插槽模板
记住记住有这个东西就行了，用到的地方应该比较少。插槽的意义是非常大且有用的，但是用到最多的是1）和2），还是以实用为主吧，以后如果用到了，再回来更新吧。