uniapp中vue3页面传参、传值方法

文章介绍了在uni-app开发中,如何在Vue3环境下使用`uni.navigateTo`进行页面跳转的基本用法,以及如何通过引入Vue3特性处理`onLoad`的替代方法。还展示了进阶用法,如使用`click`事件和动态参数传递。

基本用法

A页面

uni.navigateTo({
		url: `/pages/test/test?id=001`
	});

B页面

<script setup>
	import { onLoad } from '@dcloudio/uni-app';
	onLoad((e) => {
		console.log(e)
	});
</script>

解决思路:

vue3中没有onload所以通过uniapp引入


进阶用法:

A页面

<template>
	<view @click="toPageB(e)">
	</view>
</template>

<script setup>
const toPageB = (e)=>{
	uni.navigateTo({
		url: `/pages/test/test?_id=${e}`
	});
}
</script>

B页面

<script setup>
	import { onLoad } from '@dcloudio/uni-app';
	import { ref , onMounted ,} from 'vue';
	onLoad((e) => {
		console.log(e)
	});
</script>
### 实现 UniAppVue3 中父子组件传参方法UniAppVue3 的开发环境中,父子组件之间的参数递主要通过 `props` 和 `$emit` 来完成。以下是详细的说明以及示例代码。 #### 父组件向子组件 父组件可以利用 `props` 将数据递到子组件中。子组件通过声明接受这些属性来进行绑定并显示相关内容[^1]。 ```html <!-- 父组件 --> <template> <view class="container"> <!-- 使用 props 向子组件递 fatherNum --> <child-component :father-num="parentValue"></child-component> </view> </template> <script> import ChildComponent from &#39;./ChildComponent.vue&#39;; export default { components: { ChildComponent }, data() { return { parentValue: 42 // 这是要递给子组件的数据 }; } }; </script> ``` 子组件接收到这个后会自动更新其内部状态: ```html <!-- 子组件 --> <template> <view> 我是子呀,接收我父给我的:{{ fatherNum }} </view> </template> <script> export default { props: [&#39;fatherNum&#39;], // 接收来自父组件的参数 data() { return {}; } }; </script> ``` #### 子组件向父组件 当需要从子组件发送消息或者更改通知给父组件时,则可采用事件机制 `$emit` 完成反向通信过程[^2]。 ```html <!-- 子组件 --> <button @click="sendSon">子来修改父了</button> <script> export default { methods: { sendSon() { this.$emit(&#39;updateSon&#39;, 2); // 发送新数至父级处理逻辑处 } } }; </script> ``` 而对应的父组件则需监听此特定名称之下的触发动作,并据此调整自身变量内容: ```html <!-- 父组件 --> <child-component :father-num="parentValue" @updateSon="handleUpdateFromChild" ></child-component> <script> methods: { handleUpdateFromChild(newValue) { this.parentValue = newValue; } } </script> ``` 以上展示了完整的双向交互流程——即由上往下推送初始配置资料的同时也允许下层反馈最新状况至上端管理者那里去同步反映出来[^5]。 #### 结合实际场景应用案例分析 对于更复杂的业务需求来说可能还会涉及到列表渲染等情况,在这种情况下我们同样能够借助类似的原理达成目标。比如展示一系列新闻条目并且每一个都可以单独点击查看详情页面等功能实现方式如下所示[^3]: ```html // 父组件部分 <newsbox v-for="(item,index) in listData" :key="index" :item-info="item"/> <script setup> let listData = [ {name:"张三",age:"18"}, {name:"李四",age:"19"} ]; </script> ``` 这里的关键在于循环结构配合动态绑定特性使得每次迭代产生的实例都能获得独一无二的一组输入源从而形成各自独立的小型模块化单元体存在于此布局之中[^4]。 --- ###
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值