uniapp-组件之间的数据共享、路径传参、本地存储

 一、组件之间的数据共享

1.父组件向子组件共享数据

父组件通过 v-bind 属性绑定向子组件共享数据。同时，子组件需要使用 props 接收数据。

示例代码如下：

父组件传值：<子组件 ：属性名='属性值'>

• 属性名：父组件给子组件传过去的变量名
• 属性值：父组件给子组件传过去的值，而且是在父组件已经定义过的 

<template>
	<view class="">
		我是父组件
		<!-- 父传子 -->
		<Son v-bind:sonPrice="price" :sonName="sonName" :sonUserInfo='sonUserInfo'></Son>
	</view>
</template>
<script>
	import Son from '../../components/Son.vue'
	export default {
		components: {
			Son
		},
		data() {
			return {
				price:100,
				sonName:'嘟嘟',
				sonUserInfo:{
					name:'小狗',
					age:5,
					hobby:'追狗盘'
				}
			}
		},
	}
</script>

子组件接收：props:['属性名,'属性名']

• 子组件以数组方式接收，多个参数间用逗号分隔
• 子组件以对象形式接收，并添加校验条件 

<template>
	<view class="">
		我是子组件
		<view class=""> 父亲传过来的钱:{{sonPrice}}</view>
		<view class=""> 父亲传过来的名字:{{sonName}}</view>
		<view class=""> {{sonUserInfo.name}} </view>
	</view>
</template>
<script>
	export default {
		// 第一种接收形式
		props : ['sonPrice','sonName','sonUserInfo'],
		// 第二种接收形式 严格校验
		// props: {
		// 	sonPrice:{
		// 		type:Number, //检测数据类型 
		// 		default:0, 	 // 默认值
		// 		required:true //必填项
		// 	},
		// 	sonName:{
		// 		type:String, //检测数据类型 
		// 		default:'嘟嘟123',
		// 		required:true //必填项
		// 	},
		// 	sonUserInfo :{
		// 		type:Object,
		// 		default:{},
		// 	}
		// },
	}
</script>

2.子组件向父组件共享数据

子组件通过自定义事件的方式向父组件共享数据。示例代码如下：

子组件传递：this.$emit('事件名',参数)

<view class="">
		我是子组件
		<view class=""> 父亲传过来的钱:{{sonPrice}}</view>
		<view class=""> 父亲传过来的名字:{{sonName}}</view>
		<view class=""> {{sonUserInfo.name}} </view>

        <!-- 子传父 -->
		<button @click="getManyPrice">大儿子想找父亲多要点钱</button>
</view>

export default {
   methods: {
      getManyPrice(){
			this.$emit('getManyPrice',200)
	  },
   }
}

父组件通过事件名接收：<子组件 @子组件传过来的事件名='事件'>

<view class="">
		我是父组件
		
		<Son v-bind:sonPrice="price" :sonName="sonName" :sonUserInfo='sonUserInfo'
        @getManyPrice='getManyPrice'></Son>
</view>

export default {
   methods: {
      getManyPrice(price){
	     this.price += price
      },
   }
}

二.路径传参

正常跳转

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

带参数跳转 ，格式：url:'路径?变量名=值'

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

带多个参数跳转，格式：url:'路径?变量名=值&变量名=值' 

uni.navigateTo({
         //如果传多个参数 用 &符 隔开
		 url:'/pages/index/uncle?price=' + this.price +'&name=' + this.sonName
})

模板字符串写法，格式：url:`路径?变量名=${值}&变量名=${值}` 

uni.navigateTo({
        //使用符号：` `
		url:`/pages/index/uncle?price=${this.price}&name=${this.sonName}`
})

三.本地存储

1.uni.setStorageSync(key,date)

将date数据存储在本地缓存中指定的 key 中 

• 本地缓存中的指定的key
• date需要存储的内容

uni.setStorageSync('name1',this.sonName)

2.uni.getStorageSync(key)

从本地缓存中同步获取指定 key 对应的内容。

uni.getStorageSync('name1');

注：如果存储的变量key之前存在，那再次存储会覆盖掉原来该 key 对应的内容