一、组件通信
组件的概念:简单理解一个.vue文件就是一个组件,对于刚刚接触vue或者从来没有接触过Vue的人来说,简单简绍一下组件化开发的思想,应该是对组件进行拆分,拆分成一个个小的组件,再将这些组件组合嵌套在一起,最终形成我们的应用程序。
这些组件之间会形成一些嵌套关系,组件之间的数据是不共用的,这时候就需要进行组件通讯了
1.1父传子
<template>
<div>
<!-- 父组件 -->
<!-- 1.展示why的个人信息 -->
<!-- 如果当前的属性是一个非prop的attribute, 那么该属性会默认添加到子组件的根元素上 -->
<show-info
name="why"
:age="18"
:height="1.88"
address="广州市"
abc="cba"
class="active"
/>
<!-- 2.展示kobe的个人信息 -->
<show-info name="kobe" :age="30" :height="1.87" />
<!-- 3.展示默认的个人信息 -->
<show-info :age="100" show-message="哈哈哈哈" />
</div>
</template>
<script>
import ShowInfo from "./ShowInfo.vue";
export default {
components: {
ShowInfo,
},
};
</script>
子组件
// 作用: 接收父组件传递过来的属性
// 1.props数组语法
// 弊端: 1> 不能对类型进行验证 2.没有默认值的
// props: ["name", "age", "height"]
// props对象的写法
props: {
name: {
type: String,
default: "我是默认name"
},
age: {
type: Number,
required: true,
default: 0
},
height: {
type: Number,
default: 2
},
// 重要的原则: 对象类型写默认值时, 需要编写default的函数, 函数返回默认值
friend: {
type: Object,
default() {
return { name: "james" }
}
},
hobbies: {
type: Array,
default: () => ["篮球", "rap", "唱跳"]
},
showMessage: {
type: String,
default: "我是showMessage"
}
}
1.2子传父
子组件
<template>
<div class="add">
<button @click="btnClick(1)">+1</button>
<button @click="btnClick(5)">+5</button>
<button @click="btnClick(10)">+10</button>
</div>
</template>
<script>
export default {
// 1.emits数组语法
emits: ["add"],
// 2.emmits对象语法
// emits: {
// add: function(count) {
// if (count <= 10) {
// return true
// }
// return false
// }
// },
methods: {
btnClick(count) {
console.log("btnClick:", count)
// 让子组件发出去一个自定义事件
// 第一个参数自定义的事件名称
// 第二个参数是传递的参数
this.$emit("add", 100)
}
}
}
</script>
父组件:自定义事件接收子组件传递过来的数据
<template>
<div class="app">
<h2>当前计数: {{ counter }}</h2>
<!-- 1.自定义add-counter, 并且监听内部的add事件 -->
<add-counter @add="addBtnClick"></add-counter>
<add-counter @add="addBtnClick"></add-counter>
<!-- 2.自定义sub-counter, 并且监听内部的sub事件 -->
<sub-counter @sub="subBtnClick"></sub-counter>
</div>
</template>
<script>
import AddCounter from './AddCounter.vue'
import SubCounter from './SubCounter.vue'
export default {
components: {
AddCounter,
SubCounter
},
data() {
return {
counter: 0
}
},
methods: {
addBtnClick(count) {
this.counter += count
},
subBtnClick(count) {
this.counter -= count
}
}
}
</script>
二、路径传参
正常跳转
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')
注意:如果存储的变量key 之前存在 那么再次存储会直接替换上次的存储