vuejs幾種不同元件(頁面)間傳值的方式

2022-07-03 21:54:13 字數 940 閱讀 7534

在應用複雜時,推薦使用vue官網推薦的vuex,以下討論簡單spa中的元件間傳值。

一、路由傳值

路由物件如下圖所示:

在跳轉頁面的時候,在js**中的操作如下,在標籤中使用標籤

this.$router.push(

})

需要注意的是,實用params去傳值的時候,在頁面重新整理時,引數會消失,用query則不會有這個問題。

這樣使用起來很方便,但url會變得很長,而且如果不是使用路由跳轉的介面無法使用。

二、通過$parent,$chlidren等方法調取用層級關係的元件內的資料和方法

通過下面的方法呼叫:

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

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

這樣用起來比較靈活,但是容易造成**耦合性太強,導致維護困難

三、通過eventbus傳遞資料

使用前可以在全域性定義乙個eventbus

window.eventbus = new vue();
在需要傳遞引數的元件中,定義乙個emit傳送需要傳遞的值,鍵名可以自己定義(可以為物件)

eventbus.$emit('eventbusname', id);
在需要接受引數的元件重,用on接受該值(或物件)

//val即為傳遞過來的值

eventbus.$on('eventbusname', function(val) )

最後記住要在beforedestroy()中關閉這個eventbus

eventbus.$off('eventbusname');

php頁面之間傳值 PHP頁面間傳值的幾種方法

方法一 require once page a a hello page b require once a.php echo a.world 訪問b.php會得到 hello world!方法二 通過頁面跳轉時攜帶引數傳值 page a a world 點我跳到b.php page b echo h...

Vue 多個平行頁面間傳值,非元件間傳遞,簡單易懂

a頁面和b頁面是兩個平行頁面,非父子元件關係,先要將a頁面的引數傳遞到b頁面中。注意 query 中的引數 params 需要使用json.stringify 方法,把物件轉化成json字串 新建訂單add 我們直接使用this.route.query.row來獲取路由傳遞過來的引數!created...

系列教程之mui頁面間傳值的幾種方式

一 頁面預載入時傳值 mui.init extras 在這裡新增要傳遞的引數 或如下 var page mui.preload extras 通過上述方法預載入頁面,然後在載入的那個頁面中接受引數。mui.plusready function 二 通過mui.openwindow開啟視窗向頁面傳遞引...