vue 跳轉傳值，另個頁面接收

轉頁面需要傳值，被跳轉的頁面需要接收值

  <template slot-scope="props">
                          <ul style="magrin:0px;padding:0px;width:818px;overflow:hidden">
                          <li v-for="it in props.row.ClassDetails" class="tcbgxq_li">
                              <span class="spans">{{it.ClassName}}</span>
                              <span class="spans col">
                                     <el-link type="primary" @click="handTC(it.GeneralCheckTaskClassId)">查看</el-link>
                              </span>
                          </li>
                          </ul>
                          </template>

在js的地方需要傳遞參數(shù)

 /*超鏈接跳轉到別的頁面，并傳遞參數(shù)*/
    handTC(row){
      const id=row;
      this.$router.push({  //核心語句
        path:'/banjitanceResult',  //跳轉的路徑
        query:{  //路由傳參時push和query搭配使用 ，作用時傳遞參數(shù)
          id:id,
        }
      })
    },

在另一個頁面，需要接收傳遞過來的參數(shù)

const generalCheckTaskClassId=this.$route.query.id;//傳遞的數(shù)據(jù)

需要注意的是，傳遞的是是，接收的必須對應

程序是一種新的開放能力，開發(fā)者可以快速地開發(fā)一個小程序。小程序可以在微信內(nèi)被便

捷地獲取和傳播，同時具有出色的使用體驗。對于微信小程序，前端開發(fā)應該不陌生，目前也

是非常火，很多公司都會進行開發(fā)。對于小程序的優(yōu)點我就不到這過多描述了，今天我是想來

總結下微信小程序頁面和組件傳值。

微信小程序目錄結構

1.頁面與頁面?zhèn)髦?跳轉的url帶參傳值

微信小程序頁面直接傳值我們經(jīng)常用到的是頁面URL跳轉傳值，跳轉到的頁面通過到生命周

期onLoad里面接收。

//A頁面
Page({
 
 data:{
 
 },
 linkTo:function(){//頁面事件綁定方法
 
 let data='hello world';
 wx.navigateTo({
 url: '/pages/my/index?name=' + data,
 })
 
 }
 }）
//B頁面
 Page({
 
 data:{
 name:' '
 },
 onLoad:function(option){//接收數(shù)據(jù)
 
 this.setData({
 name: option.name
 })
 }
 }）
如果頁面有多個值要傳，直接用&符合鏈接起來就可以了。
比如'/pages/my/index?name=' + data1+'&number='+data2;

2.頁面與頁面?zhèn)髦?全局globalData傳值

//app.js
App({
 onLaunch (options) {
 // Do something initial when launch.
 },
 onShow (options) {
 // Do something when show.
 },
 onHide () {
 // Do something when hide.
 },
 onError (msg) {
 console.log(msg)
 },
 globalData: {
 
 name:'hello world'
 
 }
})
//A頁面
const app=getApp();//獲取全局對象
Page({
 
 data:{
 
 },
 onLoad:function(){
 let name=app.globalData.name;
 console.log(name);//hello world
 }
 }）

全局數(shù)據(jù)的拿去是通過拿去globalData對象，再到其他頁面獲取，當然你也可以

修改全局對象里面數(shù)據(jù)其他頁面從新去獲取。

//A頁面
const app=getApp();//獲取全局對象
Page({
 
 data:{
 
 },
 onLoad:function(){
 app.globalData.name='微信小程序'; //修改全局數(shù)據(jù)
 
 }
 }）
//B頁面
const app=getApp();//獲取全局對象
Page({
 
 data:{
 
 },
 onLoad:function(){
 let name=app.globalData.name;
 console.log(name);//微信小程序
 
 }
 }）

2.頁面與頁面?zhèn)髦?頁面數(shù)據(jù)緩存wx.setStorageSync(KEY,DATA)

//A頁面
Page({
 
 data:{
 
 },
 onLoad:function(){
 wx.setStorage({
 key:"name",
 data:"hello world"
 })
 
 
 }
 }）
 //B頁面
 
 Page({
 
 data:{
 
 },
 onLoad:function(){
 var value=wx.getStorageSync('name')；
 
 console.log(value);// hello world
 }
 }）
 此處緩存數(shù)據(jù)要用同步wx.setStorageSync(),因為異步有可能數(shù)據(jù)或者有可能會獲取不到

下面我們來說說微信小程序組件之前傳值

組件間通信

組件間的基本通信方式有以下幾種。

WXML 數(shù)據(jù)綁定：用于父組件向子組件的指定屬性設置數(shù)據(jù)，僅能設置 JSON 兼容數(shù)據(jù)
（自基礎庫版本 2.0.9 開始，還可以在數(shù)據(jù)中包含函數(shù)）。具體在組件模板和樣式章節(jié)中介紹。
事件：用于子組件向父組件傳遞數(shù)據(jù)，可以傳遞任意數(shù)據(jù)。
如果以上兩種方式不足以滿足需要，父組件還可以通過 this.selectComponent 方法獲取子組件實例對象，這樣就可以直接訪問組件的任意數(shù)據(jù)和方法。

說到組件，這里我們先了解組件的使用，組件的js、json文件和頁面不一樣。

 Component構造器

Component({
 behaviors: [],
 properties: {
 myProperty: { // 屬性名
 type: String,
 value: ''
 },
 myProperty2: String // 簡化的定義方式
 },
 
 data: {}, // 私有數(shù)據(jù)，可用于模板渲染
 lifetimes: {
 // 生命周期函數(shù)，可以為函數(shù)，或一個在methods段中定義的方法名
 attached: function () { },
 moved: function () { },
 detached: function () { },
 },
 // 生命周期函數(shù)，可以為函數(shù)，或一個在methods段中定義的方法名
 attached: function () { }, // 此處attached的聲明會被lifetimes字段中的聲明覆蓋
 ready: function() { },
 pageLifetimes: {
 // 組件所在頁面的生命周期函數(shù)
 show: function () { },
 hide: function () { },
 resize: function () { },
 },
 methods: {
 onMyButtonTap: function(){
 this.setData({
 // 更新屬性和數(shù)據(jù)的方法與更新頁面數(shù)據(jù)的方法類似
 })
 },
 // 內(nèi)部方法建議以下劃線開頭
 _myPrivateMethod: function(){
 // 這里將 data.A[0].B 設為 'myPrivateData'
 this.setData({
 'A[0].B': 'myPrivateData'
 })
 },
 _propertyChange: function(newVal, oldVal) {
 }
 }
})

使用 Component 構造器構造頁面

{
 "component": true,//這里是它把定義成組件，要不然引入到頁面會報錯
}

引入組件

//A頁面 json 

{
 "usingComponents": {
 "myComponents": "../../components/myComponents/index",//引入組件
 },
}

//A頁面 WXML

<myComponent name="hello world"></myComponent>

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

Component({
 properties: {
 name:{
 value: "",
 type: String //此處設置數(shù)據(jù)類型 這樣 組件就能接收到數(shù)據(jù)
 }
 },
 methods: {
 
 }
 })

組件間通信與事件

監(jiān)聽事件

事件系統(tǒng)是組件間通信的主要方式之一。自定義組件可以觸發(fā)任意的事件，引用組件的頁面可以監(jiān)聽這些事件。監(jiān)聽自定義組件事件的方法與監(jiān)聽基礎組件事件的方法完全一致：

<!-- 當自定義組件觸發(fā)“myevent”事件時，調用“onMyEvent”方法 -->

<myComponent bindmyevent="onMyEvent"></myComponent>

<!-- 或者可以寫成 -->
<myComponent bind:myevent="onMyEvent"></myComponent>

Page({
 onMyEvent: function(e){
 e.detail // 自定義組件觸發(fā)事件時提供的detail對象
 }
})

觸發(fā)事件

自定義組件觸發(fā)事件時，需要使用 triggerEvent 方法，指定事件名、detail對象和事件選項

項目開發(fā)中，我們很多時候都會遇到需要點擊按鈕跳轉頁面的情況。HTML中我們使用<a></a>標簽或者監(jiān)聽標簽的onclick事件來達到預期效果，而在小程序中，官方提供了以下六種跳轉方式。

wx.switchTab（API）跳轉到tabBar頁面，并關閉其他所有非tabBar頁面
wx.reLaunch（API）關閉所有頁面，打開到應用內(nèi)的某個頁面
wx.redirectTo（API）關閉當前頁面，跳轉到應用內(nèi)的某個頁面。但是不允許跳轉到tabbar頁面。
wx.navigateTo（API）保留當前頁面，跳轉到應用內(nèi)的某個頁面，但是不能跳轉到tabbar頁面。使用wx.navigateBack可以返回到原頁面。
wx.navigateBack（API）關閉當前頁面，返回上一頁面或多級頁面。可以通過getCurrentPages獲取當前的頁面棧，決定需要返回幾層。
navigator（組件）頁面中使用鏈接跳轉，相當于HTML中的<a></a>標簽用法

很多時候我們都需要在頁面跳轉時進行傳值，以上六種方式中只有wx.switchTab和wx.navigateTo不能傳遞參數(shù)外，其他四種都可以帶參數(shù)進行頁面跳轉。而我們跳轉一般都需要保留當前頁面，不需要對當前頁面進行銷毀，所以我們選擇組件navigator或者API 接口中的wx.navigateTo來實現(xiàn)帶參數(shù)跳轉效果。

在2.7.3基礎庫版本之前，兩者跳轉方式都是在url后拼接參數(shù)。如“path?key=value&key2=value2”。但在2.7.3基礎庫之后，官方提供了一種新的參數(shù)傳遞方式，但只在wx.navigateTo接口中有效。

我們該選擇哪種跳轉方式？

如何選擇跳轉方式，并不是根據(jù)我們心情去選擇的，我們應該根據(jù)實際業(yè)務以及參數(shù)類型等來選擇跳轉方式。

兩種方式對字符串傳遞的比較：

//index.wxml
	<!-- 使用navigator組件實現(xiàn)傳參跳轉 -->
	<navigator url="/pages/news/news?type=IT內(nèi)容" open-type="navigate">跳轉到內(nèi)容發(fā)布頁面（navigator）</navigator>
	<!-- 綁定按鈕點擊事件，使用常規(guī)方式 -->
	<button bindtap="skipNewsPage">跳轉到內(nèi)容發(fā)布頁面（button）</button>
	<!-- 綁定按鈕點擊事件，使用2.7.3基礎庫提供的新方式 -->
	<button bindtap="skipNewsPageEvents" plain="true">跳轉到內(nèi)容發(fā)布頁面（button）</button>

//index.js 
//常規(guī)跳轉方式 
skipNewsPage: function(e) { 
wx.navigateTo({ url: "/pages/news/news?type=IT內(nèi)容" }); 
}, 
//新方法跳轉方式 
skipNewsPageEvents: function(e) { 
wx.navigateTo({ 
url: "/pages/news/news", 
events: { 
acceptType: function(data) { 
console.log(data); 
}
 }, 
success: (res)=> { 
//通過eventChannel向被打開頁面?zhèn)鬟f數(shù)據(jù) res.eventChannel.emit('acceptType', {type: "IT內(nèi)容"});
 } 
}) 
}

//news.js 
onLoad: function (options) { 
var that=this; 
/** 
* 使用navigator或wx.navigateTo在url后直接帶參數(shù)都可以這樣獲取值 
*/ 
var navType=options.type; 
console.log("url直接帶參數(shù)傳遞：" + navType) 
/** 
* 使用2.7.3基礎庫之后的方式需要這樣獲取 
*/ 
const eventChannel=that.getOpenerEventChannel(); eventChannel.on('acceptType', function(data) { 
console.log("新方式傳遞參數(shù)：" + data.type); 
}); 
}

從以上輸出內(nèi)容我們可以看出兩者在傳遞字符串（數(shù)值類型也是如此）時是沒有區(qū)別的，相對于直接在url后跟參數(shù)，使用events方式傳遞參數(shù)代碼編寫比較多，且需要在顯示頁面進行獲取。因此若傳遞參數(shù)為字符串時，我們可以依然使用傳統(tǒng)的url后跟參數(shù)的方式跳轉。

傳遞數(shù)組參數(shù)的比較：

我們將上述代碼中的type值改為type=['1','2','3']，從運行結果我們可以看出，使用url后拼接參數(shù)的方式傳遞過來的值是字符串類型，而不是我們的數(shù)組，因此在使用時需要使用JSON.parse()轉換。而events方式傳遞來的值依舊是數(shù)組。這兩種方式各有優(yōu)勢，選擇時建議使用events傳值，不需要做JSON轉換。

傳遞對象參數(shù)的比較：

我們將上述代碼中type的值改為對象item={'a':1,'b':2,'c':3},從運行結果來看，我們使用url后跟參數(shù)的方式傳遞參數(shù)在頁面取到的值為[Object object]，我們最終獲取對象中的某個值時，其報錯找不到對象屬性。而使用events傳遞參數(shù)時，不存在這個問題，對象依舊是對象，因此在選擇時，我們?nèi)魝鬟f對象或者數(shù)組對象，那么應該使用events的方式傳遞參數(shù)。

綜上所述，我們在開發(fā)中直接使用events傳遞參數(shù)的方式，這樣避免了參數(shù)類型不明確時導致的錯誤。

在線咨詢

上一篇：模仿百度搜索框聯(lián)想詞提示效果js源代碼
下一篇：JavaScript的Blob對象

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。