2021-10-08 uniapp页面跳转+传参

页面的跳转

navigate跳转方法

<navigator url="/pages/detail/detail">跳转到非tabbar界面</navigator>
//此方法可以跳转到非Tabbar界面<navigator url="/pages/index/index" open-type="switchTab">跳转到Tabbar界面</navigator>
//如果需要跳转到tabbar界面，则需要增加open-type属性

页面传递参数

1、在url后面加参数，例如：
<navigator url="/pages/detail/detail?id=80&age=19"></navigator>
接收的页面需要在界面加载的onload函数里来接收参数
onload(option){console.log(option)//option是一个对象，包含上一个页面传递过来的参数
}

组件传值

1）父组件给子组件传值

父组件用v-bind：属性名=“属性值”绑定
子组件用props：['属性名']来接收，然后就可以用{{}}来展示数据
父组件如下：
<template><view class="content"><test :title="title"></test></view>
</template><script>import test from '../../component/component.vue'export default {data() {return {title: 'Hello'
..........
子组件如下：
<template><view>这是test组件{{title}}这是父组件传过来的数据</view>
</template><script>export default {props:['title'],data() {return {}},methods: {}}
</script>

2)子组件给父组件传值

子组件设置点击函数，然后在自定义函数中利用this.$emit(“自定义事件名”,参数值)给父组件传值
父组件定义emit中自定义的事件名并写接收参数的函数
子组件如下：
<template><view>这是test组件{{title}}这是父组件传过来的数据<view><button @click="sendNum" type="primary">给父组件传值</button>//自组件给父组件传值</view></view>
</template><script>export default {props:['title'],data() {return {num:3}},methods: {sendNum(){console.log("传值")this.$emit("myevent",this.num)//"myevent"自定义事件，$emit传值}}}
父组件如下:
<template><view class="content"><test :title="title" @myevent="getNum"></test>//myevent是自定义事件</view>
</template><script>import test from '../../component/component.vue'export default {data() {return {title: 'Hello'}},onLoad() {},methods: {getNum(num){console.log(num,'父组件得到的值')//接收传到值}},

3）兄弟组件之家的传值

1、需要两个组件A和B，假设组件B给组件A传值
A中需要创建全局变量，通过uni.$on()创建
A组件描述如下：
uni.$on('updateNum',num =>{//num是传递过来的参数this.num=num})
//其中updateNum全局变量名称，num是传递过来的参数
//这个注册全局变量的方法要创建到created函数中
created() {uni.$on('updateNum',num=>{//num是传递过来的参数this.num=num})}
//在实例创建完成后created()被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，property 和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el property 目前尚不可用。 B组件描述如下：
B组件来接收全局变量
<template><button @click="addNum">修改A中的的数据</button>//修改事件的按钮，实现页面传值
</template><script>export default{methods:{addNum(){uni.$emit('updateNum',[1,2,3,4])//通过$emit来就收全局事件并传值，这里可以传任何类型数据}}}
</script>

2021-10-08 uniapp页面跳转+传参相关推荐

Android:页面跳转传参方式一，页面跳转传参方式二
一.页面跳转传参方式一跳转的过程如何传参:也就是页面之间如何传递参数,有点像函数调用如何传参,页面跳转也要传参. 复制一个工程你要跳转,(现在的代码如下),intent 既然能设置跳转到哪个页面 ...
小程序开发页面跳转传参问题
小程序开发页面跳转传参问题 1.简单值 let id=1; wx.navigateTo({ url:'/pages/mypage/mypage?id='+id }) 取值另一个页面 onload:f ...
vue中页面跳转传值_vue 页面跳转传参
页面之间的跳转传参,正常前端js里写 window.location.href="xxxxx?id=1" 就可以了: 但是vue不一样需要操作的是路由history,需要用到 V ...
vue 跳转页面带对象_vue 页面跳转传参
页面之间的跳转传参,正常前端js里写 window.location.href="xxxxx?id=1" 就可以了: 但是vue不一样需要操作的是路由history,需要用到 V ...
Android按键响应的几种方式、安卓页面的跳转、页面跳转传参、页面自动跳转、Activity（页面）的生命周期
按键响应的第一种方式: 在XML文件里面设置按键的onClick绑定函数.就像下面的代码,给Button设置onClick属性,在按键被按下的时候,会调用java文件里面的onClickbtton1这 ...
页面跳转传参，A 页面跳转到B页面，把A页面获取的值传到B页面
1.问题: 最近遇到一个问题,在A页面跳转到B页面时,同时将一个值带到B页面并显示出来. 最后找到一个比较靠谱的方法,分享给大家~ 2.解决: 页面其他内容不再展示,只写A,B两个页面的JS代码段,有 ...
小程序页面跳转传参被截断（丢失参数）
我们在开发小程序的过程中,有时候会在小程序页面跳转的时候传参,url会被截断. //我需要传递的参数 let videoDetail = "https://xxxxxxxxxx/index. ...
微信小程序页面跳转传参
跳转到下一个页面在page1.wxml写点击事件 <button bindtap="next_page" type="primary">跳转到下一 ...
页面跳转传参（跳转到下个页面）
在将要跳转页面的位置添加点击事件,在事件中写出要传入的参数. (我使用的循环,所以item就可以得到我将要跳转的参数) <uni-tr v-for="(item,index) in d ...

2021-10-08 uniapp页面跳转+传参

页面的跳转

navigate跳转方法

页面传递参数

组件传值

1）父组件给子组件传值

2)子组件给父组件传值

3）兄弟组件之家的传值

2021-10-08 uniapp页面跳转+传参相关推荐

最新文章

热门文章