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），還是以實用為主吧，以后如果用到了，再回來更新吧。