理解
Vue中有個非常重要的核心思想航夺,就是組件化蕉朵,組件化是為了代碼復用
什么是組件化
組件化,就像一個電腦主機里的主板阳掐,有內存條的插口始衅,有硬盤冷蚂,光驅等等的插口,我們的項目汛闸,就像一個電腦主機蝙茶,通過各種組件化的模塊(硬盤、內存等)诸老,來拼合成一個完整的電腦隆夯。
(圖片來源 vue-組件化應用構建)
如圖,每一個塊都是一個組件别伏,由許許多多的組件拼合而成蹄衷,可以無限的嵌套下去
組件化的好處
- 模塊復用,提高效率厘肮,讓重復的代碼只寫一遍愧口。
- 預留個性化設置,可以保證模塊类茂,既通用调卑,又可變。
- 提高可維護性大咱,如果一個項目多個頁面使用了同一個組件(例如消息彈框)恬涧,如果修改彈框樣式,只需要修改這個模塊即可碴巾。
寫法
cli模式
組件部分
<template>
<div></div>
</template>
<script>
export default {
name:"myAlert"
};
<style></style>
使用者部分
<template>
<div>
<myAlert></myAlert> <!-- 實例中使用組件 -->
</div>
</template>
<script>
import myAlert from '@/components/alert.vue';//導入自己寫的組件
export default {
components:{myAlert}//在這個vue實例中注冊組件
};
</script>
<style></style>
引入vue.js模式
// 定義名為 todo-item 的新組件
Vue.component('myAlert', {
template: '<div>這是一個彈框</div>'
})
var app = new Vue(...)
html部分使用
<div>
<myAlert></myAlert>
</div>
組件傳值
Vue
中存在的組件之間傳值的方案如下
父=>子
props
子組件中聲明props
,父組件往對應的props值中傳遞
$refs
父組件使用this.$refs.組件名.變量
來選中子組件并修改子組件的內容
$children
父組件使用this.$children[0].變量
來選中并修改子組件的內容
需要注意的是:由官網vm.$children得知
$children 并不保證順序溯捆,也不是響應式的
所以一般不建議使用此方法來進行傳值,因為不能很穩(wěn)定的找到指定組件的實例厦瓢,除非這個頁面只有一個子組件
另外提揍,此例中,this.$children[0]
不是響應式的this.$children[0].變量
是響應式的煮仇。
子=>父
$emit
此處為觀察者模式
- 子組件調用
this.$emit('confirm','點擊了確定')
來派發(fā)confirm
事件 - 父組件中
<myAlert @confirm='successCallback'></myAlert>
來監(jiān)聽事件;
注意:此處為劳跃,誰派發(fā)就是誰監(jiān)聽,也就是說浙垫,confirm
事件的派發(fā)者和監(jiān)聽者刨仑,都是myAlert
組件,myAlert
組件監(jiān)聽完畢后將調用父組件的successCallback
回調事件夹姥,當然這個監(jiān)聽的事件名
和觸發(fā)的事件名
都是可以自定義
的杉武。
兄弟組件之間互相傳值
使用公共節(jié)點搭橋
- 使用公共父級組件
$parents
或者$root
//組件一
this.$parents.$on('foo',(e)=>{
console.log(e);//此處e為$emit時傳入的值
})
//組件二
this.$parents.$emit('foo','bar');//控制臺輸出bar
- 使用任意兩個組件之間傳值的方案 點擊查看
跨輩分傳值
概念,所謂跨輩分傳值辙售,就是
祖輩->父輩->子輩->孫輩->...
其中轻抱,垮了一個輩分或多個輩分的就是跨輩分傳值,例如旦部,祖輩及孫輩
provide/inject
由于多級嵌套祈搜,使用props
傳遞顯然是不現(xiàn)實的
針對這種情況较店,vue
提供了 provide/inject
兩個API
來完成這件事
- 祖輩使用
provide
聲明一個變量 - 孫輩使用
inject
來注入祖輩聲明的變量
寫法:
//祖輩
export default {
provide(){//此處可以傳入動態(tài)變量,與data類似
return {
componentYeye:this
}
},
data(){
return {
yeyedeBianliang:'爺爺的變量'
}
}
}
//孫輩
export default {
inject:['componentYeye'],//此處為數組容燕,注入祖輩聲明的變量
mounted(){
console.log(this.componentYeye.yeyedeBianliang);//爺爺的變量
}
}
注意
- 此方法多用來制作組件庫時使用梁呈。
- 此方法不建議直接在孫輩修改祖輩的數據。因為這些數據可能在多個子組件中使用缰趋,如果要修改捧杉,應該調用祖輩組件變量的方法來修改陕见,與
vuex
中建議變量修改都是用commit
類似
使用任意兩個組件之間傳值的方案 點擊查看
任意兩個組件之間傳值
<a id='evert-components'></a>
原型掛載
所謂原型掛載秘血,就是在main.js
中將公共變量,事件评甜,都掛在到Vue原型上
//main.js
Vue.prototype.$globalData = {}
Vue.prototype.$sayName = function(e){
console.log('我的名字是',e)
}
new Vue({...})
//組件一
Vue.prototype.$globalData.name='小明';
this.$sayName('小王');//我的名字是小王
//組件二
console.log(this.$sayName.name);//小明
this.$sayName('小王');//我的名字是小王
事件總線
所謂事件總線灰粮,就是在當前的Vue
實例之外,再創(chuàng)建一個Vue實例來專門進行變量傳遞忍坷,事件處理粘舟,管理回調事件等
//main.js中
Vue.prototype.$bus = new Vue();
new Vue({...})
//組件一
this.$bus.$on('sayName',(e)=>{
console.log('我的名字是',e)
})
//組件二
this.$bus.$emit('sayName','小明');//我的名字是 小明
vuex
Vuex
是Vue
提供的一種,專門用來管理vue
中的公共狀態(tài)佩研,事件等等柑肴。詳見 從0開始探究vue-公共變量的管理