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>