uniapp頁面傳值詳解

uniapp是基於Vue框架開發的跨平台應用開發框架，能夠同時生成iOS、Android和H5等多個平台的應用程序。在uniapp開發中，頁面之間的參數傳遞無疑是一個非常核心的部分。接下來我們從多個方面對uniapp頁面傳值做詳細的闡述。

一、uniapp頁面傳值非同步

在uniapp開發中，頁面傳值的方式有很多種。最為常見的是非同步傳值方式，即先打開目標頁面，然後再傳遞參數過去。下面是一個簡單的傳遞字元串的例子：

//在當前頁面傳遞參數
uni.navigateTo({
  url: 'targetPage?message=hello',
  success: function() {
    console.log('success');
  }
});

//在目標頁面接收參數
export default {
  data() {
    return {
      message: ''
    }
  },
  onLoad(options) {
    this.message = options.message;
    console.log(this.message); //hello
  }
}

通過上述代碼可以看到，使用uni.navigateTo跳轉到目標頁面時，在url的後面拼接參數message=hello，目標頁面可以通過onLoad生命周期函數中的options參數獲取到當前頁面傳遞過來的參數，並將其賦值到本頁面的data屬性中。

二、uniapp頁面傳對象

除了傳遞字元串，我們還可以將對象傳遞給目標頁面。同樣地，在當前頁面先打開目標頁面，然後將對象通過url參數傳遞過去。目標頁面同樣可以通過onLoad生命周期函數中的options參數獲取到當前頁面傳遞過來的參數，然後將其賦值到本頁面的data屬性中。下面是一個傳遞對象的例子：

//在當前頁面傳遞參數
uni.navigateTo({
  url: 'targetPage?name=張三&age=18',
  success: function() {
    console.log('success');
  }
});

//在目標頁面接收參數
export default {
  data() {
    return {
      person: {}
    }
  },
  onLoad(options) {
    this.person.name = options.name;
    this.person.age = options.age;
    console.log(this.person); //{name: "張三", age: "18"}
  }
}

三、uniapp頁面傳值的幾種方式

1. uniapp頁面之間傳值

在uniapp頁面之間傳遞數據，除了可以使用非同步傳值方式，還可以使用全局變數、緩存、Vuex等方式實現。下面是使用全局變數傳值的示例：

//在main.js文件中定義全局變數
Vue.prototype.global = {
  message: ''
}

//在當前頁面設置全局變數的值
this.global.message = 'hello';

//在目標頁面獲取全局變數的值
console.log(this.global.message); //hello

2. uniapp頁面傳參數

除了使用url參數傳遞數據，還可以在跳轉頁面時通過query參數傳遞數據。與url參數傳遞數據的方式類似，只需要在生成路由時傳遞參數即可。下面是一個使用query參數傳遞數據的示例：

//在當前頁面傳遞參數
uni.navigateTo({
  url: 'targetPage?name=張三&age=18',
  query: {
    message: 'hello'
  },
  success: function() {
    console.log('success');
  }
});

//在目標頁面獲取query參數的值
console.log(this.$route.query.message); //hello

3. uniapp頁面之間傳遞參數

在uniapp中，頁面之間可以通過事件匯流排傳遞參數。我們可以在全局掛載一個事件匯流排，然後不同的頁面通過事件匯流排進行傳遞信息。下面是使用事件匯流排傳遞參數的示例：

//在main.js文件中定義事件匯流排
Vue.prototype.eventBus = new Vue();

//在發送頁面發送事件
this.$eventBus.$emit('message', 'hello');

//在接收頁面接收事件
mounted() {
  this.$eventBus.$on('message', message => {
    console.log(message); //hello
  })
}

四、uniapp傳值方法

在uniapp中，頁面之間的傳值方式非常多，我們可以根據不同的需求選擇合適的傳值方式。下面是一個匯總uniapp傳值方法的示例：

export default {
  data() {
    return {
      person: {},
      message: '',
      count: 0
    }
  },
  computed: {
    doubleCount() {
      return this.count * 2;
    }
  },
  methods: {
    handleClick() {
      //使用非同步傳值方式
      uni.navigateTo({
        url: 'targetPage?name=張三&age=18',
        success: function() {
          console.log('success');
        }
      });

      //使用全局變數傳值方式
      this.global.message = 'hello';

      //使用query參數傳值方式
      uni.navigateTo({
        url: 'targetPage?name=張三&age=18',
        query: {
          message: 'hello'
        },
        success: function() {
          console.log('success');
        }
      });

      //使用事件匯流排傳遞參數
      this.$eventBus.$emit('message', 'hello');
    }
  }
}

五、uniapp組件傳值

在uniapp中，組件之間也需要傳值。與頁面傳值相同，我們也可以通過props、$emit、事件匯流排等方式進行組件之間的傳值。下面是一個使用props傳值的示例：

//在父組件中傳遞參數

原創文章，作者：PAPS，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/149384.html