本地存储
1. 存储内容大小一般支持5MB左右（不同浏览器可能还不一样）
2. 浏览器端通过 Window.sessionStorage 和 Window.localStorage 属性来实现本地存储机制。
3. 相关API：
- 1. ```xxxxxStorage.setItem('key', 'value');```
- 该方法接受一个键和值作为参数，会把键值对添加到存储中，如果键名存在，则更新其对应的值。
- 2. ```xxxxxStorage.getItem('person');```
- 该方法接受一个键名作为参数，返回键名对应的值。
- 3. ```xxxxxStorage.removeItem('key');```
- 该方法接受一个键名作为参数，并把该键名从存储中删除。
- 4. ``` xxxxxStorage.clear()```
- 该方法会清空存储中的所有数据。
4. 备注：
1. SessionStorage存储的内容会随着浏览器窗口关闭而消失。
2. LocalStorage存储的内容，需要手动清除才会消失。
3. ```xxxxxStorage.getItem(xxx)```如果xxx对应的value获取不到，那么getItem的返回值是null。
4. ```JSON.parse(null)```的结果依然是null。
<body>
<h2>localStorage</h2>
<button onclick="saveData()">点我保存一个数据</button>
<button onclick="readData()">点我读取一个数据</button>
<button onclick="deleteData()">点我删除一个数据</button>
<button onclick="deleteAllData()">点我清空一个数据</button>
<script type="text/javascript" >
let p = {name:'张三',age:18}
function saveData(){
localStorage.setItem('msg','hello!!!')
localStorage.setItem('msg2',666)
localStorage.setItem('person',JSON.stringify(p))
}
function readData(){
console.log(localStorage.getItem('msg'))
console.log(localStorage.getItem('msg2'))
const result = localStorage.getItem('person')
console.log(JSON.parse(result))
// console.log(localStorage.getItem('msg3'))
}
function deleteData(){
localStorage.removeItem('msg2')
}
function deleteAllData(){
localStorage.clear()
}
</script>
</body>组件通信
1.1 组件间通信基本原则
- 不要在子组件中直接修改父组件的状态数据
- 数据在哪, 更新数据的行为(函数)就应该定义在哪
1.2 vue 组件间通信方式
- props
- vue 的自定义事件
- 消息订阅与发布(如: pubsub 库)
- slot
- vuex
2自定义事件
2.1绑定事件监听
// 方式一: 通过v-on 绑定
@delete_todo="deleteTodo"
// 方式二: 通过$on()
this.$refs.xxx.$on('delete_todo', function (todo) {
this.deleteTodo(todo)
})2.2触发事件
// 触发事件
this.$emit(eventName, data)示例
父组件中
<TodoHeader ref="header" />
<TodoHeader @addTodo="addTodo" />
methods:{
addTodo(){
}
},
mounted(){// 异步执行代码
// 给<>绑定addTodo事件监听
this.$refs.header.$on('addTodo', this.addTodo)
}子组件中
methods: {
add(){
console.log('add回调被调用了')
this.number++
},
sendStudentlName(){
//触发Student组件实例身上的atguigu事件
this.$emit('atguigu',this.name,666,888,900)
// this.$emit('demo')
// this.$emit('click')//组件上也可以绑定原生DOM事件，父组件需要使用native修饰符
},
unbind(){
this.$off('atguigu') //解绑一个自定义事件
// this.$off(['atguigu','demo']) //解绑多个自定义事件
// this.$off() //解绑所有的自定义事件
},
death(){
this.$destroy() //销毁了当前Student组件的实例，销毁后所有Student实例的自定义事件全都不奏效。
}
}2.3注意
- 此方式只用于子组件向父组件发送消息(数据)
- 问题: 隔代组件或兄弟组件间通信此种方式不合适
2.4总结
一种组件间通信的方式，适用于：子组件 ===> 父组件
使用场景：A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件（事件的回调在A中）。
绑定自定义事件：
第一种方式，在父组件中：<Demo @atguigu="test"/>或 <Demo v-on:atguigu="test"/>
第二种方式，在父组件中：
<Demo ref="demo"/>
......
mounted(){
this.$refs.xxx.$on('atguigu',this.test)
}- 若想让自定义事件只能触发一次，可以使用once修饰符，或$once方法。
- 触发自定义事件：this.$emit('atguigu',数据)
- 解绑自定义事件this.$off('atguigu')
- 组件上也可以绑定原生DOM事件，需要使用native修饰符。
- 注意：通过this.$refs.xxx.$on('atguigu',回调)绑定自定义事件时，不要直接在里面写函数，回调要么配置在methods中，要么用箭头函数，否则this指向会出问题
全局事件总线
- 一种组件间通信的方式，适用于任意组件间通信。
- 安装全局事件总线：
new Vue({
......
beforeCreate() {
Vue.prototype.$bus = this //安装全局事件总线，$bus就是当前应用的vm
},
......
})- 使用事件总线：
（1）接收数据：A组件想接收数据，则在A组件中给$bus绑定自定义事件，事件的回调留在A组件自身。
methods(){
demo(data){......}
}
......
mounted() {
this.$bus.$on('xxxx',this.demo)
}（2）提供数据：this.$bus.$emit('xxxx',数据)
2.最好在beforeDestroy钩子中，用$off去解绑当前组件所用到的事件
示例
main.js
//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//关闭Vue的生产提示
Vue.config.productionTip = false
//创建vm
new Vue({
el:'#app',
render: h => h(App),
beforeCreate() {
Vue.prototype.$bus = this //安装全局事件总线
},
})Student.vue
<template>
<div class="student">
<h2>学生姓名：{{name}}</h2>
<h2>学生性别：{{sex}}</h2>
<button @click="sendStudentName">把学生名给School组件</button>
</div>
</template>
<script>
export default {
name:'Student',
data() {
return {
name:'张三',
sex:'男',
}
},
mounted() {
// console.log('Student',this.x)
},
methods: {
sendStudentName(){
this.$bus.$emit('hello',this.name)
}
},
}
</script>
<style lang="less" scoped>
.student{
background-color: pink;
padding: 5px;
margin-top: 30px;
}
</style>School.vue
<template>
<div class="school">
<h2>学校名称：{{name}}</h2>
<h2>学校地址：{{address}}</h2>
</div>
</template>
<script>
export default {
name:'School',
data() {
return {
name:'尚硅谷',
address:'北京',
}
},
mounted() {
// console.log('School',this)
this.$bus.$on('hello',(data)=>{
console.log('我是School组件，收到了数据',data)
})
},
beforeDestroy() {
this.$bus.$off('hello')
},
}
</script>
<style scoped>
.school{
background-color: skyblue;
padding: 5px;
}
</style>4. 消息订阅与发布(PubSubJS 库)
1. 一种组件间通信的方式，适用于任意组件间通信。
2. 使用步骤：
1. 安装pubsub：```npm i pubsub-js```
2. 引入: ```import pubsub from 'pubsub-js'```
3. 接收数据：A组件想接收数据，则在A组件中订阅消息，订阅的回调留在A组件自身。
4.1订阅消息
PubSub.subscribe('msg', function(msg, data){})4.2发布消息
PubSub.publish('msg', data)4.3示例
订阅消息（绑定事件监听
import PubSub from 'pubsub-js'
export default {
mounted () {
// 订阅消息(deleteTodo)
this.pid = PubSub.subscribe('deleteTodo', (msg, date) => {
this.deleteTodo(index)
})
}
}发布消息（触发事件）
PubSub.publish('deleteTodo', this.date)4.4总结
- 优点: 此方式可实现任意关系组件间通信(数据)
- 最好在beforeDestroy钩子中，用
PubSub.unsubscribe(pid)去取消订阅。
<template>
<div class="school">
<h2>学校名称：{{name}}</h2>
<h2>学校地址：{{address}}</h2>
</div>
</template>
<script>
import pubsub from 'pubsub-js'
export default {
name:'School',
data() {
return {
name:'尚硅谷',
address:'北京',
}
},
mounted() {
// console.log('School',this)
/* this.$bus.$on('hello',(data)=>{
console.log('我是School组件，收到了数据',data)
}) */
this.pubId = pubsub.subscribe('hello',(msgName,data)=>{
console.log(this)
// console.log('有人发布了hello消息，hello消息的回调执行了',msgName,data)
})
},
beforeDestroy() {
// this.$bus.$off('hello')
pubsub.unsubscribe(this.pubId)
},
}
</script>
<style scoped>
.school{
background-color: skyblue;
padding: 5px;
}
</style>5.nextTick
1. 语法：```this.$nextTick(回调函数)```
2. 作用：在下一次 DOM 更新结束后执行其指定的回调。
3. 什么时候用：当改变数据后，要基于更新后的新DOM进行某些操作时，要在nextTick所指定的回调函数中执行。
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
