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传值的示例：

//在父组件中传递参数

  

<script>
import child from '@/components/child.vue';

export default {
  components: {
    child
  },
  data() {
    return {
      message: 'hello'
    }
  }
}
</script>

//在子组件中接收参数

  

<script>
export default {
  props: ['message']
}
</script>

六、uniapp兄弟组件之间传值

在uniapp兄弟组件之间传值，我们可以借助父组件作为中介。即将数据通过父组件进行传递。下面是一个使用父组件传值的示例：

//在父组件中传递参数

  

<script>
import child1 from '@/components/child1';
import child2 from '@/components/child2';

export default {
  components: {
    child1,
    child2
  },
  data() {
    return {
      message: ''
    }
  },
  methods: {
    handleSendMsg(msg) {
      this.message = msg;
    }
  }
}
</script>

//在兄弟组件1中发送事件

  

<script>
export default {
  data() {
    return {
      msg: 'hello'
    }
  },
  methods: {
    handleClick() {
      this.$emit('sendMsg', this.msg);
    }
  }
}
</script>

//在兄弟组件2中接收参数

  

<script>
export default {
  props: ['message']
}
</script>

总结

本文介绍了uniapp页面传值的多种方式，包括页面之间传值异步、页面传对象、uniapp页面传值的几种方式、uniapp页面之间传递参数、uniapp传值方法、uniapp组件传值、uniapp兄弟组件之间传值。一个好的程序员需要掌握程序开发的精髓，而uniapp页面传值技术则是掌握uniapp开发必备技能之一。