一、组件之间的数据共享
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 对应的内容