Uiapp---上课4

一.父传子

 （1） 在渲染的子组件上，使用v-bind的方式绑定要传递的父组件的data的值

 （2）在子组件中，使用props的方式接受

首先在建一个文件夹componts,在里面新建组件son,在页面中建立father页面，最后进行引入。

father页面代码如下：

格式：<子组件 :属性名="属性值">

<script>
	import Son from '../../componets/Son.vue'  //引入子组件
	export default{
		components:{
			Son             //注册
		},
		data() {
			return {
				money:50
			}
		}
		
	}
</script>

<template>
	<!-- <Son :price="price"></Son> -->
	<view class="">
		<Son :money="money"></Son>
		
	
	</view>
</template>

Son组件页面如下：

<script>
	export default {
		// 第一种写法：
			 // props : ['money']
	     // 第二种写法
		 props:{
			 money:{
				 type: Number,
				 default:0,
				 required:true
			 }
		 }
	}
	
</script>

<template>
	<view class="">
		儿子
		父亲传过来的值 {{money}}
	

	</view>
	       
</template>

结果如下：

 

二.子传父

（1）在渲染的子组件上，使用v-on的方式绑定要传递的父组件的methods的函数

（2）在子组件中，this.$emit的方式调用传递过来的函数。调用的同时传递子组件的数据

Son组件页面如下：

格式：this.$emit('事件名',参数)

 methods: {
			 lackMoney() {
				 this.$emit('lackMoney',100)
			 }
		 },

  <button @click="lackMoney">缺钱了</button>

father页面代码如下：

格式：<子组件 @子组件抛过来的事件名="事件"  />

		methods: {
			lackMoney(money) {
				this.money = this.money + money
			}
		},

 <Son :money="money"  @lackMoney="lackMoney"></Son>  //父进行接受子的要求

结果如下;

 三.路径传参

三、路径传参
 正常跳转

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}`

  }）

四、本地存储
如果说这个值很多地方都使用到了 我们就可以理由本地存储这个东西

存储：

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

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

取：
格式：       uni.getStorageSync('键')

         uni.getStorageSync('name')