一、全局事件總線

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

四、Vue封裝的過度與動畫

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

2.使用方法:

樣式準(zhǔn)備

1，元素進入的樣式：

①v-enter:進入的起點

②v-enter-active:進入過程中

③ v-enter-to:進入的終點

2，元素離開的樣式：

①V-leave:離開的起點

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

③V-leave-to:離開的終點

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

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

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

五、配置代理

方法一

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

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

注：

1.優(yōu)點：配置簡單，請求資源時直接發(fā)給前端(8080)即可。

2.缺點：不能配置多個代理，不能靈活的控制請求是否走代理。

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

方法二

1.優(yōu)點：可以配置多個代理，且可以靈活的控制請求是否走代理

2.缺點：配置略微繁瑣，請求資源時必須加前綴。

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

六、mixin（混入）

功能:

可以把多個組件共用的配置提取成一 個混入對象

使用方式:

第一步定義混合

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

第二步使用混入

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

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

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

最新評論