uniapp子组件跳转页面带参数

uniapp子组件跳转页面带参数

在uniapp中，跳转页面是很常见的操作，但在跳转时需要携带参数，这就需要我们了解如何在uniapp中进行子组件的跳转，并传递参数。本文将详细介绍如何在uniapp中实现子组件跳转页面并传递参数的方法。

1.在跳转前将参数存储在data中

在uniapp中传递参数的一个常见方法是将参数存储在data中，然后在跳转前使用setData()方法将参数传递到子组件中。下面是一个示例代码：

//在父组件中定义data
data() {
  return {
    name: '张三',
    age: 18
  }
},
methods: {
  goToChild() {
    uni.navigateTo({
      url: '/pages/child/child?name=' + this.data.name + '&age=' + this.data.age
    });
  }
}

上述代码中，我们定义了一个父组件，并在data中定义了name和age两个参数。在goToChild()方法中，使用uni.navigateTo()方法跳转到child组件，并将参数拼接在url中。

2.在子组件中接收参数

在子组件中，我们可以通过onLoad()方法来接收参数。在父组件传递参数时，通过拼接url的方式将参数传递进去，可以通过options参数的方式在子组件中接收到。

下面是示例代码：

//在子组件中接收参数
onLoad(options) {
  this.setData({
    name: options.name,
    age: options.age
  })
}

上述代码中，在onLoad()方法中通过options参数来接收参数，并将参数存储在子组件的data中。

3.使用query参数传递参数

除了上述方法，还可以使用query参数来传递参数，这种方法更加简洁。我们可以在跳转时通过query参数将参数传递到子组件中，子组件中可以通过this.$mp.query来接收参数。

下面是示例代码：

//在父组件中跳转到子组件并传递参数
this.$uni.navigateTo({
  url:'/pages/child/child?name=张三&age=18'
})
//在子组件中接收参数
onLoad() {
  const {name, age} = this.$mp.query
  this.setData({
    name,
    age
  })
}

上述代码中，我们在跳转页面时直接将参数拼接在url中，并在子组件的onLoad()方法中使用this.$mp.query来接收参数。

总结

以上就是uniapp中进行子组件跳转页面并传递参数的方法。通过将参数存储在data中，并在跳转前通过setData()方法将参数传递到子组件中，或者在跳转时使用query参数来传递参数，子组件中接收到参数后便可以直接使用了。