uni-app 父传子、子传父、路径传参、本地存储

一、父传子

父传子步骤:①要动态绑定一个属性给子组件

                      ②子组件要接收父组件传过来的值,就要使用props接收

                      ③然后子组件就可以使用了

代码实现:

父组件

	
//template代码
<Son :hobby="hobby" :fatherObj="obj" :fatherSetPrice="price" :fatherSetName="name"></Son>


//data中的数据
data(){
			return{
				price:100,
				name:'张三',
				num:0,
				hobby:'唱、跳、rap',
				obj:{
					name:'李四',
					age:18
				}
			}
		},

父亲传过来的数据我们要在子组件中接收、使用 

		<view>
			我是子组件
			<!-- 父传子 -->
			<view>这是父组件传过来的数据:{{fatherSetPrice}}</view>
			<view>父亲传过来的名字:{{fatherSetName}}</view>
			<view>父亲传过来的爱好:{{hobby}}</view>
			<view>父亲传过来的对象:{{fatherObj.name}}</view>
			
		</view>



//script

props:{
			fatherSetPrice:{
				type:Number,   //检测数据类型
				default:0,     //默认值
				required:true  //是否为必填项
			},
			fatherSetName:{
				type:String,
				default:'',
				required:true
			},
			hobby:{
				type:String,
				default:'',
				required:true
			},
			fatherObj:{
				type:Object,
				default:{},
				required:true
			}
		},

props有两种写法,一种是直接写成数组形式,用逗号隔开

props : ['fatherPrice','sonName']

另一种是对象形式,我们主要使用 对象形式,在传过来的基础上加上校验

props:{
			fatherSetPrice:{
				type:Number,  //检测数据类型
				default:0,	  //默认值
				required:true //是否为必填项
			},

二、子传父

子传父是通过$emit()方法进行传递,通过点击事件,向父组件传值,父组件通过事件名接收

子组件传值

//template
	<button @click="sendNum">给父组件传数值</button>
	<button @click="sendPrice">给父组件传钱</button>
	<button @click="sendHobby">给父组件传hobby</button>


//data数据
data(){
			return{
				num1:10,
				price:50,
				hobby1:'打王者'
				
			}
		},


//methods方法
		methods:{
			sendNum(){
				this.$emit('getNum',this.num1)
			},
			sendPrice(){
				this.$emit('getPrice',this.price)
			},
			sendHobby(){
				this.$emit('getHobby',this.hobby1)
			}
		}
	}

父组件接收

因为接收的是事件名,所以要用@事件名="事件"

//template
		<Son @getPrice="getPrice" @getHobby="getHobby" @getNum="getNum"></Son>
		<view>子传过来的数值: {{num}}</view>
		<view>子传过来的钱:{{price}}</view>
		<view>子传过来的hobby:{{hobby}}</view>	


//data
		data(){
			return{
				price:100,
				name:'张三',
				num:0,
				hobby:'唱、跳、rap'
			}
		},



//methods方法
	methods:{
			getNum(num1){              //传过来的参数
				//console.log(num1);
				this.num = num1
			},
			getPrice(price1){           //传过来的参数
				//console.log(price1);
				this.price = price1
			},
			getHobby(hobby1){           //传过来的参数
				this.hobby = hobby1
			},

单击事件前

 单击事件后

 三、路径传参

 平常我们跳转页面的路径是不带参的

			toUnclePage(){
				uni.navigateTo({
					url:'/pages/uncle/uncle'
				})
			}

传一个参跳转

格式:url: ' 地址?变量名=值'

			toUnclePage(){
				uni.navigateTo({
                    //url:'/pages/uncle/uncle?price=100'
                    url:'/pages/uncle/uncle?price' + this.price
				})
			}

传多个参跳转

格式:url:'地址?变量名='值'&'变量名='值'

			toUnclePage(){
				uni.navigateTo({
					url:'/pages/index/uncle?price=' + this.price + '&name=' + this.name
				})
			}

模板字符串写法

格式:url:`地址?变量名=${值}&变量名=${值}`

			toUnclePage(){
				uni.navigateTo({
					url:`/pages/uncle/uncle?price=${this.price}&name=${this.name}`
					
				})
			}

四、本地存储

将数据存储在本地缓存中,如果有多个地方使用到这个数据,就可以在本地存储中取

这是两个同步接口

存储:

格式:uni.setStorageSync('键',值)

uni.setStorageSync('name',this.name)

取:

格式:uni.getStorageSync('键')

uni.getStorageSync('name')

注:如果之前存储过变量key,那么再次存储会替换变量key的值

  • 5
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
UniApp 是一个基于 Vue.js 的跨平台应用开发框架,它支持构建一次,多端部署(包括Web、App、小程序、H5等)。在 UniApp 中,组件之间的通信和数据传递是非常常见的。父向子组件传递参数可以通过以下几种方式进行: 1. **Props(属性)**:这是最常用的方式,父组件将数据作为属性(props)传递给子组件。例如: ```vue <template> <child-component :data="parentData" /> </template> <script> export default { components: { ChildComponent, }, data() { return { parentData: '这是父组件的数据', }; }, }; </script> ``` 在子组件中,通过 `v-bind` 或者简写 `:` 来接收和使用这些数据。 2. **事件(Event Emitter)**:父组件可以触发一个事件,并将数据作为事件的参数传给子组件,子组件通过 `@event` 修饰符监听这个事件并处理数据。 ```vue <template> <button @click="handleParentData">传递数据</button> </template> <script> export default { methods: { handleParentData(data) { this.$emit('parent-data-changed', data); }, }, }; </script> ``` 在父组件中,接受事件并设置数据: ```vue <template> <child-component :data="parentData" @parent-data-changed="updateData"></child-component> </template> <script> // ... methods: { updateData(newData) { this.parentData = newData; }, } </script> ``` 3. **Vuex(状态管理)**:如果需要更复杂的数据管理,可以使用 Vuex 存储共享状态,然后通过 actions 和 getters 在组件间传递数据。 相关问题: 1. 如何在 UniApp 中处理多个属性的父子传递? 2. 如何避免在父组件频繁更新子组件的 props 导致性能问题? 3. 什么时候会考虑使用 Vuex 而不是直接通过 Props 传递数据?
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值