导航跳转与传参/创建组件/组件通信方式

导航跳转

https://uniapp.dcloud.io/api/README
官网–api----路由与页面跳转
该方法与小程序的跳转一样把wx改成uni

• uni.navigateTo保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面。

uni.navigateTo({
	url:'./index/index'
});

• uni.redirectTo关闭当前页面，跳转到应用内的某个页面。

uni.redirectTo({
	url: './index/index'
});

• uni.reLaunch关闭所有页面，打开到应用内的某个页面。

uni.reLaunch({
	url: './index/index'
});

• uni.switchTab跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面

uni.switchTab({
	url: '/pages/index/index'
});

• uni.navigateBack关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层。

uni.navigateBack({
	delta: 2  //返回两层页面
});

跳转传参

uni.switchTab 跳转还是一如既往的不可以传参要用本地存储取的方法来传参
以下所述

不同页面跳转传参

这个是a页面

<template>
	<view class="content">
		<view @click="btnget">
          点击跳转
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				msg:'1111'
			}
		},
		methods:{
			btnget(){
				let newmsg=this.msg
				uni.navigateTo({
					// url: '/pages/hi/hi?msg='+newmsg //这个是es5拼接
					url: `/pages/hi/hi?msg=${newmsg}` //这个是es6拼接
				})
			}
		}
	}
</script>
<style lang="scss">

</style>

这个是b页面

<template>
	<view class="">
		<view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{}
		},
		onLoad(option) {
			const name=option.msg
			console.log(option.msg)
		}
	}
</script>

<style>
</style>

创建组件

创建的组件与page同级目录
components----选择新建组件----点击创建

创建完在其他页面使用

<template>
	<view class="">
		<test></test>
	</view>
</template>
<script>
	import test from '../../components/test.vue'
	export default {
		data() {
			return {
				
			};
		},
		components:{
			test
		}
	}
	
</script>
<style>
</style>

组件的生命周期

https://uniapp.dcloud.io/collocation/frame/lifecycle?id=%e7%bb%84%e4%bb%b6%e7%94%9f%e5%91%bd%e5%91%a8%e6%9c%9f

组件生命周期
uni-app 组件支持的生命周期，与vue标准组件的生命周期相同。这里没有页面级的onLoad等生命周期：

函数名	说明	平台差异说明	最低版本
beforeCreate	在实例初始化之后被调用。详见		
created	在实例创建完成后被立即调用。详见		
beforeMount	在挂载开始之前被调用。详见		
mounted	挂载到实例上去之后调用。详见 注意：此处并不能确定子组件被全部挂载，如果需要子组件完全挂载之后在执行操作可以使用$nextTickVue官方文档		
beforeUpdate	数据更新时调用，发生在虚拟 DOM 打补丁之前。详见	仅H5平台支持	
updated	由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。详见	仅H5平台支持	
beforeDestroy	实例销毁之前调用。在这一步，实例仍然完全可用。详见		
destroyed	Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。详见	

组件通信方式

父子传值

这边是调用的组件里面的东东

父组件

这里的父是你定义的页面
这里面是把你要传递的自定义一个属性传过去

<template>
	<view class="">
		<!-- 这边的title是动态的  第一个是自定义的 第二个是要拿到传递的值 -->
		<test :title="title"></test>
	</view>
</template>
<script>
	import test from '../../components/test.vue'
	export default {
		data() {
			return {
				title:'hello',//这个是父 这个是要传给子的值
			};
		},
		components:{
			test
		}
	}
	
</script>
<style>
</style>

子组件

这里的子是你的声明的组件
然后子在script里面通过props来进行接收你传的值

<template>
	<view>
		{{title}}
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		props:['title']//这边是子 通过props来进行接收
	}
</script>

<style>

</style>

子父传值

子组件

子 的值通过

this.$emit('myevent',this.num)//子向父传值通过this.$emit('自定义的参数',要传递的值)
// 然后在父里面拿到这个自定义的事件

<template>
	<view>
		{{title}}
		<view  @click="sentnum">
			点击传递给父亲
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				num:3
			}
		},
		props:['title'],//这边是子 通过props来进行接收
		methods:{
			sentnum(){
				console.log(11111)
				this.$emit('myevent',this.num)//子向父传值通过this.$emit('自定义的参数',要传递的值)
				// 然后在父里面拿到这个自定义的事件
				
			}
		}
	}
</script>

<style>

</style>

父组件

然后父拿到子自定义的属性来进行获取
如下所示

<template>
	<view class="">
		<!-- 这边的title是动态的  第一个是自定义的 第二个是要拿到传递的值 -->
		<test :title="title" @myevent="getnum"></test>
		<button >点击接收子的值{{num}}</button>
	</view>
</template>
<script>
	import test from '../../components/test.vue'
	export default {
		data() {
			return {
				num:0,
				title:'hello',//这个是父 这个是要传给子的值
			};
		},
		methods:{
			getnum(num){
				var that=this
				that.num=num;
				console.log(num)
				
			}
		},
		components:{
			test
		}
	}
	
</script>
<style>
</style>

非父子组件传值

也称为兄弟传值
首先在一个页面把值组件传过去
假设定义了a b 组件过去 这样在这个页面就显示对应的 a b 组件了撒

a组件

这里是通过$emit来进行发送数据撒

<template>
	<view @click="btna">
		点击改变b的值
	</view>
</template>

<script>
	export default {
		name:"a",
		data() {
			return {
				
			};
		},
		methods:{
			btna(){
				uni.$emit('updatanum',10)
			}
		}
	}
</script>

<style>

</style>

b组件

通过$on来进行接收与改变数据撒

<template>
	<view>
		{{num}}
	</view>
</template>

<script>
	export default {
		name:"b",
		data() {
			return {
				num:0
			};
		},
		created() {
			uni.$on('updatanum',(num)=>{
				this.num=num
			})
		}
	}
</script>

<style>

</style>

点击后可以改变

这就形成了把a b 组件 拿在页面显示
然后在页面点击对应组件的内容 进行改变不同组件的值数据