一、全局事件總線

1.何為全局事件

一種組件間通信的方式，適用于任意組件間通信。

2.安裝全局事件總線

new Vue({
beforeCreate()
Vue. prototype. $bus = this //安裝全局事件總線，$bus就是 當(dāng)前應(yīng)用的vm
})

3.使用事件總線

接收數(shù)據(jù)

A組件想接收數(shù)據(jù)，則在A組件中給$bus綁定自定義事件，事件的回調(diào)留在A組件自身。

methods(){
demo(data){.....}
mounted() {
this . $bus . $on( 'xxxx' ,this . demo)
}

提供數(shù)據(jù)

this . $bus . $emit( 'xxxx',數(shù)據(jù))

注： 使用完畢后再到beforeDestroy鉤子中，用$off去解綁當(dāng)前組件所用到的事件。

二、消息訂閱與發(fā)布

1.何為pubsub

消息訂閱與發(fā)布也是一種組件間通信的方式也叫pubsub，適用于任意組件間通信。

2.使用步驟

1.安裝pubsub:npm i pubsub-js

2.引入pubsub:import pubsub from ' pubsub-js'

3.接收數(shù)據(jù): A組件想接收數(shù)據(jù)，則在A組件中訂閱消息，訂閱的回調(diào)留在A組件自身。

methods(){
demo(data){.....}
mounted() {
this.pid = pubsub. subscribe( 'xx'，this.demo) //訂閱消息
}

4.提供數(shù)據(jù) pubsub. publish( ' xxx' ,數(shù)據(jù))

5.注： 使用完之后再到beforeDestroy鉤子中，用PubSub.unsubscribe(pid)去取消訂閱。

三、nextTick

1.語法：this. $nextTick(回調(diào)函數(shù))

2.作用:在下一次DOM更新結(jié)束后執(zhí)行其指定的回調(diào)。

3.什么時(shí)候用:當(dāng)改變數(shù)據(jù)后，要基于更新后的新DOM進(jìn)行某些操作時(shí)，要在nextTick所指定的回調(diào)函數(shù)中執(zhí)行。

四、Vue封裝的過度與動(dòng)畫

1.作用： 在插入，更新或移除DOM元素時(shí)， 在合適的時(shí)候給元素添加樣式類名。

2.使用方法:

樣式準(zhǔn)備

1，元素進(jìn)入的樣式：

①v-enter:進(jìn)入的起點(diǎn)

②v-enter-active:進(jìn)入過程中

③ v-enter-to:進(jìn)入的終點(diǎn)

2，元素離開的樣式：

①V-leave:離開的起點(diǎn)

②V-leave-active:離開過程中

③V-leave-to:離開的終點(diǎn)

3.使用包裹要過度的元素，并配置name屬性

<transition name="hello">
    <h1 v-show=" isShow" >你好啊! </h1>
</transition>

注：若有多個(gè)元素需要過度，則需要使用： <transition-group>, 且每個(gè)元愫都要指定key值。

五、配置代理

方法一

在vue.config.js中添加如下配置

devServer:{
proxy: "http://localhost:5000"
}

注：

1.優(yōu)點(diǎn)：配置簡(jiǎn)單，請(qǐng)求資源時(shí)直接發(fā)給前端(8080)即可。

2.缺點(diǎn)：不能配置多個(gè)代理，不能靈活的控制請(qǐng)求是否走代理。

3.工作方式：若按照上述配置代理，當(dāng)請(qǐng)求了前端不存在的資源時(shí)，那么該請(qǐng)求會(huì)轉(zhuǎn)發(fā)給服務(wù)器（優(yōu)先匹配前端資源）

方法二

1.優(yōu)點(diǎn)：可以配置多個(gè)代理，且可以靈活的控制請(qǐng)求是否走代理

2.缺點(diǎn)：配置略微繁瑣，請(qǐng)求資源時(shí)必須加前綴。

  devServer: {
    proxy: {
      '/shanyu': {// 匹配所有以'shanyu'開頭的請(qǐng)求路徑
        target: 'http://localhost:5000',// 代理目標(biāo)的基礎(chǔ)路徑
        pathRewrite: {
            '^/shanyu': '' // 將所有的前綴替換為空串再去服務(wù)器內(nèi)擦護(hù)照該路徑
         	// ws和changeOrigin默認(rèn)都為true
        	// ws: true, // 用于支持websocket
       		// changeOrigin: true // 用于控制請(qǐng)求頭host的值
        },
      	//changeOrigin設(shè)置為true時(shí)，服務(wù)器收到的請(qǐng)求頭中的host為: localhost: 5000
		//changeOrigin設(shè)置為false時(shí)，服務(wù)器收到的請(qǐng)求頭中的host為: localhost :8080
      }

六、mixin（混入）

功能:

可以把多個(gè)組件共用的配置提取成一 個(gè)混入對(duì)象

使用方式:

第一步定義混合

data(){....},
methods:{....}
}

第二步使用混入

(1)全局混入: Vue.mixin(xxx)

(2)局部混入: mixins:['xxx']

到此這篇關(guān)于Vue兩個(gè)通信方式與動(dòng)畫過度及混入使用介紹的文章就介紹到這了,更多相關(guān)Vue通信方式內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論