從0開始探究vue-組件化-組件之間傳值

理解

Vue中有個非常重要的核心思想航夺,就是組件化蕉朵,組件化是為了代碼復用

什么是組件化

組件化,就像一個電腦主機里的主板阳掐,有內存條的插口始衅,有硬盤冷蚂,光驅等等的插口,我們的項目汛闸,就像一個電腦主機蝙茶,通過各種組件化的模塊(硬盤、內存等)诸老,來拼合成一個完整的電腦隆夯。


vue組件化

(圖片來源 vue-組件化應用構建

如圖,每一個塊都是一個組件别伏,由許許多多的組件拼合而成蹄衷,可以無限的嵌套下去

組件化的好處

  1. 模塊復用,提高效率厘肮,讓重復的代碼只寫一遍愧口。
  2. 預留個性化設置,可以保證模塊类茂,既通用调卑,又可變。
  3. 提高可維護性大咱,如果一個項目多個頁面使用了同一個組件(例如消息彈框)恬涧,如果修改彈框樣式,只需要修改這個模塊即可碴巾。

寫法

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

此處為觀察者模式

  1. 子組件調用this.$emit('confirm','點擊了確定')來派發(fā)confirm事件
  2. 父組件中<myAlert @confirm='successCallback'></myAlert>來監(jiān)聽事件;
    注意:此處為劳跃,誰派發(fā)就是誰監(jiān)聽,也就是說浙垫,confirm事件的派發(fā)者和監(jiān)聽者刨仑,都是myAlert組件,myAlert組件監(jiān)聽完畢后將調用父組件的successCallback回調事件夹姥,當然這個監(jiān)聽的事件名觸發(fā)的事件名都是可以自定義的杉武。

兄弟組件之間互相傳值

使用公共節(jié)點搭橋

  1. 使用公共父級組件$parents或者$root
//組件一
this.$parents.$on('foo',(e)=>{
    console.log(e);//此處e為$emit時傳入的值
})
//組件二
this.$parents.$emit('foo','bar');//控制臺輸出bar
  1. 使用任意兩個組件之間傳值的方案 點擊查看

跨輩分傳值

概念,所謂跨輩分傳值辙售,就是

祖輩->父輩->子輩->孫輩->...
其中轻抱,垮了一個輩分或多個輩分的就是跨輩分傳值,例如旦部,祖輩及孫輩

provide/inject

由于多級嵌套祈搜,使用props傳遞顯然是不現(xiàn)實的

針對這種情況较店,vue提供了 provide/inject兩個API來完成這件事

  1. 祖輩使用provide聲明一個變量
  2. 孫輩使用inject來注入祖輩聲明的變量

寫法:

//祖輩
export default {
    provide(){//此處可以傳入動態(tài)變量,與data類似
        return {
            componentYeye:this
        }
    },
    data(){
        return {
            yeyedeBianliang:'爺爺的變量'
        }
    }
}
//孫輩
export default {
    inject:['componentYeye'],//此處為數組容燕,注入祖輩聲明的變量
    mounted(){
        console.log(this.componentYeye.yeyedeBianliang);//爺爺的變量
    }
}

注意

  1. 此方法多用來制作組件庫時使用梁呈。
  2. 此方法不建議直接在孫輩修改祖輩的數據。因為這些數據可能在多個子組件中使用缰趋,如果要修改捧杉,應該調用祖輩組件變量的方法來修改陕见,與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

VuexVue提供的一種,專門用來管理vue中的公共狀態(tài)佩研,事件等等柑肴。詳見 從0開始探究vue-公共變量的管理

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市旬薯,隨后出現(xiàn)的幾起案子晰骑,更是在濱河造成了極大的恐慌,老刑警劉巖绊序,帶你破解...
    沈念sama閱讀 222,807評論 6 518
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件硕舆,死亡現(xiàn)場離奇詭異,居然都是意外死亡骤公,警方通過查閱死者的電腦和手機抚官,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,284評論 3 399
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來阶捆,“玉大人凌节,你說我怎么就攤上這事∪魇裕” “怎么了刊咳?”我有些...
    開封第一講書人閱讀 169,589評論 0 363
  • 文/不壞的土叔 我叫張陵,是天一觀的道長儡司。 經常有香客問我娱挨,道長,這世上最難降的妖魔是什么捕犬? 我笑而不...
    開封第一講書人閱讀 60,188評論 1 300
  • 正文 為了忘掉前任跷坝,我火速辦了婚禮酵镜,結果婚禮上,老公的妹妹穿的比我還像新娘柴钻。我一直安慰自己淮韭,他們只是感情好,可當我...
    茶點故事閱讀 69,185評論 6 398
  • 文/花漫 我一把揭開白布贴届。 她就那樣靜靜地躺著靠粪,像睡著了一般。 火紅的嫁衣襯著肌膚如雪毫蚓。 梳的紋絲不亂的頭發(fā)上占键,一...
    開封第一講書人閱讀 52,785評論 1 314
  • 那天,我揣著相機與錄音元潘,去河邊找鬼畔乙。 笑死,一個胖子當著我的面吹牛翩概,可吹牛的內容都是我干的牲距。 我是一名探鬼主播,決...
    沈念sama閱讀 41,220評論 3 423
  • 文/蒼蘭香墨 我猛地睜開眼钥庇,長吁一口氣:“原來是場噩夢啊……” “哼牍鞠!你這毒婦竟也來了?” 一聲冷哼從身側響起评姨,我...
    開封第一講書人閱讀 40,167評論 0 277
  • 序言:老撾萬榮一對情侶失蹤难述,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后参咙,有當地人在樹林里發(fā)現(xiàn)了一具尸體龄广,經...
    沈念sama閱讀 46,698評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 38,767評論 3 343
  • 正文 我和宋清朗相戀三年蕴侧,在試婚紗的時候發(fā)現(xiàn)自己被綠了择同。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,912評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡净宵,死狀恐怖敲才,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情择葡,我是刑警寧澤紧武,帶...
    沈念sama閱讀 36,572評論 5 351
  • 正文 年R本政府宣布,位于F島的核電站敏储,受9級特大地震影響阻星,放射性物質發(fā)生泄漏。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 42,254評論 3 336
  • 文/蒙蒙 一妥箕、第九天 我趴在偏房一處隱蔽的房頂上張望滥酥。 院中可真熱鬧,春花似錦畦幢、人聲如沸坎吻。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,746評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽瘦真。三九已至,卻和暖如春黍瞧,著一層夾襖步出監(jiān)牢的瞬間诸尽,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,859評論 1 274
  • 我被黑心中介騙來泰國打工雷逆, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留弦讽,地道東北人污尉。 一個月前我還...
    沈念sama閱讀 49,359評論 3 379
  • 正文 我出身青樓膀哲,卻偏偏與公主長得像,于是被迫代替她去往敵國和親被碗。 傳聞我的和親對象是個殘疾皇子某宪,可洞房花燭夜當晚...
    茶點故事閱讀 45,922評論 2 361

推薦閱讀更多精彩內容