組件局部注冊
<div id="app">
hello vue
<my-component></my-component>
</div>
<script>
var Child = {
template:'<div>局部注冊組件</div>'
};
new Vue({
el:'#app',
components:{
'my-component':Child
}
})
</script>
is 屬性掛載組件
常見：ul偶摔、select、table
（字符串模板除外：.vue文件）
例：在table里使用組件無效条摸，添加一個is屬性。在is下往下寫無效铸屉。
<div id="app">
<table border="1">
<tbody is="my-com"></tbody>
</table>
</div>
<script>
Vue.component('my-com',{
template:'<tr><td>1</td><td>2</td></tr>'
});
new Vue({
el:'#app'
})
</script>
props
數(shù)組和對象是引用類型钉蒲，指向同一片內(nèi)存空間，所以props是數(shù)組和對象時彻坛，修改子組件內(nèi)容會影響到父組件顷啼。默認雙向綁定。
數(shù)據(jù)驗證
Vue.component('my-component',{
props:{
propA:Number, //必須是數(shù)字類型
propB:[String,Number],
propC:{//布爾值小压，如果沒定義线梗，默認是true
type:Boolean,
default:true
}，
propD:{//數(shù)字怠益，而且是必傳
type:Number,
required:true
}仪搔，
propE:{//如果是數(shù)組或?qū)ο螅J值必須是一個函數(shù)來返回
type:Array,
default:function (){
return [];
}
}蜻牢，
propF:{//自定義一個驗證函數(shù)
validator:function(value){
return value > 10;
}
}
}
})
自定義事件
v-on 監(jiān)聽自定義事件外烤咧，也監(jiān)聽DOM事件。用.native 修飾符表示監(jiān)聽的是一個原生事件抢呆，監(jiān)聽的是該組件的根元素煮嫌。
<my-component v-on:click.native="handleClick"></my-component>
使用 v-model
- 接受一個value屬性；
- 在有新的value時觸發(fā)input事件
<div id="app">
{{ value }}
<my-com v-model="value" @click="minus"></my-com>
<!-- 父向子:執(zhí)行減操作 -->
<button @click="minus">-1</button>
</div>
<script>
// 點擊add加一 把const++通過input事件把const傳遞出去
Vue.component('my-com', {
props: {
// 這個必須叫value抱虐，并與input一一對應(yīng)昌阿。不懂為啥?
value: {
type: Number
}
},
template: '<div> {{ const1 }} <button @click="add">+1</button></div>',
data() {
return {
const1: this.value
}
},
methods: {
add() {
this.const1++;
this.$emit('input', this.const1); //必須為input
}
},
watch:{
value(val){
this.const1 = val;
}
}
});
new Vue({
el: '#app',
data: {
value: 1
},
methods: {
minus() {
this.value--;
},
}
})
</script>
非父子組件通信
推薦使用一個空 Vue 實例作為中央事件總線（bus），也就是一個中介恳邀。
<div id="app">
{{ message }}
<my-coma></my-coma>
</div>
<script>
// 創(chuàng)建空的bus實例
const bus = new Vue({
//可以繼續(xù)擴展bus
//data懦冰，methods...
});
// 注冊一個組件
Vue.component('my-coma',{
template:'<button @click="passEvent">click</button>',
methods:{
passEvent(){
bus.$emit('msgInfo','come from children ');
}
}
});
new Vue({
el:'#app',
data:{
message:''
},
mounted(){
bus.$on('msgInfo',(msg)=>{
this.message = msg;
})
}
})
</script>
非父子組件通信--父鏈、子鏈
this.$parent 可以在子組件中取到父組件的東西
this.$children 可以拿到app 實例里的所有子組件谣沸，如果有很多子組件刷钢，可以得到一個數(shù)組。
修改父（子）組件內(nèi)容乳附，最好不這么做内地！
非父子組件通--子組件索引
子組件索引只在組件渲染完成后填充，非響應(yīng)式的赋除，僅作為直接訪問子組件的應(yīng)急方案阱缓，應(yīng)當(dāng)避免在模板、計算屬性中使用自定義子組件索引贤重。
加載兩個相同的組件茬祷，用ref 區(qū)分，如果需要for循環(huán)，可以動態(tài)綁定:ref="a"
<my-coma ref='a'></my-coma>
<my-coma ref='b'></my-coma>
取值：
this.$refs.a
slot 內(nèi)容分發(fā)
當(dāng)需要讓組件組合使用時祭犯，要內(nèi)容分發(fā)秸妥，混合父組件內(nèi)容和子組件模板就叫內(nèi)容分發(fā)。
<div id="app">
<my-com>
<!-- message生命周期由父組件或父實例來決定的沃粗，包括作用域粥惧，和my-com本身沒關(guān)系。 -->
{{ message }}
</my-com>
</div>
<script>
//hello world：
// hello來自‘my-com’組件本身的內(nèi)容最盅，
// world：父組件通過<slot>來充當(dāng)?shù)倪@部分內(nèi)容
Vue.component( 'my-com',{
//slot 標(biāo)簽掛載內(nèi)容突雪，
template:'<div>hello <slot></slot></div>',
});
new Vue({
el:'#app',
data:{
message:'world'
}
})
</script>
具名slot
在一個組件里，設(shè)置多個slot來區(qū)分顯示的內(nèi)容涡贱。（按照slot順序展示：你好 朋友）
<my-com>
<div slot="a">
你好
</div>
<div slot="b">
朋友
</div>
</my-com>
script
<script>
Vue.component( 'my-com',{
template:'<div>hello <slot name="a"></slot><slot name="b"></slot></div>',
});
new Vue({
el:'#app',
})
</script>
slot展示默認內(nèi)容
如果組件里沒有內(nèi)容咏删，就會顯示slot里的默認內(nèi)容。內(nèi)容作用域只與當(dāng)前組件（my-com）相關(guān)问词，與父組件無關(guān)督函。
<div id="app">
<my-com></my-com>
</div>
script
Vue.component( 'my-com',{
template:'<div>hello <slot>這里是默認</slot></div>',
});
訪問slot
rander函數(shù)用的多
mounted(){
this.$slots.default //取默認內(nèi)容
this.$slots.a //取a的內(nèi)容
}
組件的高級用法
遞歸組件
滿足條件：
- 必須給組件設(shè)置一個name。
- 在一個合適的時間結(jié)束組件的遞歸激挪，否則報超棧的錯誤辰狡。
<div id="app">
<my-com :count="1"></my-com>
</div>
<script>
Vue.component('my-com',{
name:'myCon',
props:{
count:{
type:Number,
default:1
}
},
template:'<div><my-com :count="count +1" v-if="count<3"></my-com>{{ count }}</div>',
});
new Vue({
el:'#app',
})
</script>
內(nèi)聯(lián)模板（少用）
給組件標(biāo)簽使用inline-template特性，組件就會把它的內(nèi)容當(dāng)做模板垄分，而不是當(dāng)做內(nèi)容分發(fā)宛篇。會替代子組件的template來顯示。
<div id="app">
<my-com inline-template>
<div>
{{message}}
</div>
</my-com>
</div>
script
結(jié)果為：你好
<script>
Vue.component( 'my-com',{
// template:'<div>hello <slot>這里是默認內(nèi)容</slot></div>',
data(){
return{
message:'你好'
}
}
});
new Vue({
el:'#app',
data:{
message:'world'
},
})
</script>
{{message}}作用域為組件內(nèi)的data薄湿，有些難理解叫倍，少用吧~
異步組件
組件比較龐大時，使用異步組件
- 按需加載豺瘤，可以節(jié)省首次加載的時間段标，提高速度，也算是一個性能優(yōu)化炉奴。
- 那么一個組件可能會被使用多次，按需加載的話也不會加載多次蛇更，第一次加載完成就會緩存下來瞻赶，和webpack是一樣的，所以不用擔(dān)心
<div id="app">
<my-com :count="1"></my-com>
</div>
<script>
Vue.component('my-com',function(resolve,reject){
window.setTimeout(function(){
resolve({
template:'<div>from 異步加載組件</div>'
})
},3000)
});
new Vue({
el:'#app',
})
</script>
$nextTick
等組件渲染完后使用
this.$nextTick( () => {
});
vue 如何觀察數(shù)據(jù)變化派任？
并不是直接更新DOM砸逊，而是開啟一個檢查隊列，緩存在一次事件循環(huán)中掌逛，緩存中會排除重復(fù)數(shù)據(jù)來避免不必要計算或DOM的操作师逸，在下一次循環(huán)tick中，vue才會刷新隊列豆混，執(zhí)行實際的操作篓像。如果使用for循環(huán)動態(tài)改變100次數(shù)據(jù)动知，實際上只觸發(fā)1次
檢測：
vue 優(yōu)先使用promise檢測，不支持會使用HTML5新特性 Mutation Observer 的方法员辩，都不支持采用setTimeout
x-template
前提是你沒有使用webpack
<div id="app">
<my-com></my-com>
<script type="text/x-template" id="my">
<div>...</div>
</script>
</div>
手動掛載實例
一般使用 new vue 創(chuàng)建實例
new Vue({
el:'#app'
})
在特殊情況下也可以動態(tài)創(chuàng)建 vue 實例盒粮。
vue提供兩個API：
extend : 基礎(chǔ)vue 構(gòu)造器，創(chuàng)建了一個子類奠滑。參數(shù)包含組件選項的對象
$mount ：掛載 （有很多參數(shù)丹皱，參見官網(wǎng)）
<div id="app">
hello Vue
</div>
<script>
// 用extend 定義組件內(nèi)容
const myComponent = Vue.extend({
template:'<div> from extend </div>'
});
//通過 $mount 手動掛載在指定DOM里（通過工廠函數(shù)方法），支持class和id選擇器
new myComponent().$mount('#app');
</script>
結(jié)果：from extend 覆蓋 hello vue
問答模塊
1.watch 與 computed 區(qū)別
watch：單純監(jiān)聽某些東西變化宋税，執(zhí)行一些操作摊崭。
computed：根據(jù)已有的 data 或 props 的改變，來動態(tài)輸出一個內(nèi)容.常見的：排序杰赛、過濾呢簸、千位運算符等計算屬性。
2.bus 怎么避免全局污染淆攻？
在 webpack 中阔墩，bus是一個bus.js文件，通過模塊化就不會全局污染瓶珊。
import bus from './bus.js'
3.mixins混合
把部分vue的配置merge到實例里啸箫，如：data、methods、props、計算屬性潮售、生命周期等內(nèi)容炸茧，形成復(fù)用。
mixins:[]
組件解決UI的復(fù)用盔性，mixins混合解決組件內(nèi)部配置的復(fù)用
4.遠程搜索（需要補充）
數(shù)據(jù)過多不建議使用select數(shù)據(jù)下拉。
5.keep-alive (需要補充)
讓組件做緩存
文章內(nèi)容參考：
Vue.js 實戰(zhàn)之組件篇：https://segmentfault.com/l/1500000009448056/play
說說Vue的異步組件：https://juejin.im/entry/599562f36fb9a0249716d299
vue.js官網(wǎng)：https://cn.vuejs.org/v2/guide/components.html
