vue組件中頁(yè)面?zhèn)髦档姆绞接心男?/h1>

本篇文章為大家展示了vue組件中頁(yè)面?zhèn)髦档姆绞接心男?，?nèi)容簡(jiǎn)明扼要并且容易理解，絕對(duì)能使你眼前一亮，通過(guò)這篇文章的詳細(xì)介紹希望你能有所收獲。

創(chuàng)新互聯(lián)公司專(zhuān)注于滄縣企業(yè)網(wǎng)站建設(shè),響應(yīng)式網(wǎng)站開(kāi)發(fā),商城網(wǎng)站定制開(kāi)發(fā)。滄縣網(wǎng)站建設(shè)公司,為滄縣等地區(qū)提供建站服務(wù)。全流程按需網(wǎng)站開(kāi)發(fā)，專(zhuān)業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，創(chuàng)新互聯(lián)公司專(zhuān)業(yè)和態(tài)度為您提供的服務(wù)

一、路由傳值

路由對(duì)象如下圖所示：

在跳轉(zhuǎn)頁(yè)面的時(shí)候，在js代碼中的操作如下，在標(biāo)簽中使用標(biāo)簽

this.$router.push({

            name: 'routePage',

            query/params: {

              routeParams: params

            }

          })

需要注意的是，實(shí)用params去傳值的時(shí)候，在頁(yè)面刷新時(shí)，參數(shù)會(huì)消失，用query則不會(huì)有這個(gè)問(wèn)題。

這樣使用起來(lái)很方便，但url會(huì)變得很長(zhǎng)，而且如果不是使用路由跳轉(zhuǎn)的界面無(wú)法使用。

二、通過(guò)$parent,$chlidren等方法調(diào)取用層級(jí)關(guān)系的組件內(nèi)的數(shù)據(jù)和方法

通過(guò)下面的方法調(diào)用：

this.$parent.$data.id //獲取父元素data中的id

this.$children.$data.id //獲取父元素data中的id

這樣用起來(lái)比較靈活，但是容易造成代碼耦合性太強(qiáng)，導(dǎo)致維護(hù)困難

三、通過(guò)eventBus傳遞數(shù)據(jù)

使用前可以在全局定義一個(gè)eventBus

window.eventBus = new Vue();

在需要傳遞參數(shù)的組件中，定義一個(gè)emit發(fā)送需要傳遞的值，鍵名可以自己定義（可以為對(duì)象）

eventBus.$emit('eventBusName', id);

在需要接受參數(shù)的組件重，用on接受該值（或?qū)ο螅?/p>

//val即為傳遞過(guò)來(lái)的值

eventBus.$on('eventBusName', function(val) {console.log(val)})

最后記住要在beforeDestroy()中關(guān)閉這個(gè)eventBus

eventBus.$off('eventBusName');

上述內(nèi)容就是vue組件中頁(yè)面?zhèn)髦档姆绞接心男?，你們學(xué)到知識(shí)或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

網(wǎng)站標(biāo)題：vue組件中頁(yè)面?zhèn)髦档姆绞接心男?
本文網(wǎng)址：http://weahome.cn/article/jhjphp.html