uni-app之组件/跳转传参/组件通信

最新推荐文章于 2025-06-28 11:09:00 发布

原创最新推荐文章于 2025-06-28 11:09:00 发布 · 1.7k 阅读

7 ·

CC 4.0 BY-SA版权

uni-app 专栏收录该内容

4 篇文章

订阅专栏

本文介绍微信小程序中组件的使用方法，包括组件的创建、注册与调用流程，并详细讲解了页面间的跳转及参数传递技巧。

组件

类似于微信小程序的模板，微信小程序里叫templates
在这里插入图片描述
test.vue

<template>
	<view>
		这是tst组件
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		}
	}
</script>

<style>

</style>

在要是用的页面注册，import 和components

<script>
	import test from '../../components/test.vue'
	export default{
		data () {
			return {
			}
		},
		
	components:{
		test:test
	}
	}
</script>

在页面使用

<view>
		<test></test>
	</view>

跳转页面和传参

跳转到tabbar页面，注意不能传参

template

<button type="default" v-on:click="navi">跳转</button>

script

navi() {
				uni.switchTab({
					url: '../index/index?value=667'
				})
				}

t跳转到非tabbar页面并传参

由messaget跳转到detail
message的templates

<button type="default" v-on:click="navi2">跳转到非tabbar</button>

script，参数66666

				navi2() {
					uni.navigateTo
						
				({
						url: '../detail/detail/detail?value=666666'
					})
					}

detail页面接受参数，原理：onload函数的参数options就是上一个页面传的参数66666

onLoad(options) {
			console.log(options)
			
		},

组件通信

父组件（页面）发数据给子组件

（pages里的message.vue发给components里的test.vue）,最后显示在message页面
meaasge.vue

<view>
		<test :title='b'></test>
	</view>

b是data里的变量

test.vue

<script>
	export default {
		data() {
			return {
				
			};
		},
		props:['title']
	}
</script>

<view>
		这是tst组件
		这是父组件传来的数据{{title}}
	</view>

子组件发给父

具体见教程p26
test.vue

methods:{
sendmun(){
this.$emit('myEven',this.num)
}

message.vue
<test @myEven=“getnum”>

同级组件传值（）

test1,2两个components的组件传值，最终在页面体现
test1中的uni.on:
监听自定义事件。事件可以由 test2中的uni.#￥emit 触发（具体为点击按钮触发）。回调函数会接收 uni.#$emit 传递的参数。

test1

<template>
	<view>
		test1中的数据{{num}}
	</view>
</template>

<script>
	export default {
		data() {
			return {
				num:0
			};
		},
		methods:(){
		},
		created(){
			uni.$on('updatenum',num=>{
				this.num+=num
			})
		}
	}
</script>

<style>

</style>

test2

<template>
	<view>
		
<button type="default" v-on:click="addnum">修改test1中的数据</button>		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		
		},
		methods:{
			addnum(){
				uni.$emit('updatenum',10)
			}
		}
	}
</script>

<style>

</style>