1.4-CSDN博客

本文链接：https://blog.csdn.net/m0_63713211/article/details/128555235

本文介绍了浏览器的localStorage和sessionStorage机制，用于实现本地数据持久化。同时，展示了在Vue.js中创建和处理自定义事件的方法，包括父子组件间的通信，以及使用全局事件总线进行组件间通信的基本流程。

摘要由CSDN通过智能技术生成

复习

浏览器本地存储

<!-- 在浏览器Application中的storage -->
<!-- 实现本地存储机制 -->
<!-- 关闭浏览器数据还在 -->
<body>
    <button onclick="saveData()">点我保存数据</button>
    <button onclick="readData()">点我读取数据</button>
    <button onclick="deleteData()">点我删除</button>
    <button onclick="deleteAllData()">点我删除</button>
<script>
    let p={name:'张三',age:17}
    //存储
    function saveData(){ 
        localStorage.setItem('msg1','hello') //key value 都是字符串
        localStorage.setItem('person',JSON.stringify(p))//对象转化为字符串
    }

    //读取
    function readData(){
        console.log(localStorage.getItem('msg1'))
    }

    //删除
    function deleteData(){
        localStorage.removeItem('msg1')
    }

    //清除全部
    function deleteAllData(){
        localStorage.clear()
    }


</script>

sessionStorage：存储内容会随浏览器窗口的关闭而关闭或者手动清除

自定义事件

父组件

<template>
    <div class="hello">
      <h1>
        {{ msg }}{{ name }}
      </h1>
      <!-- props子传父 -->
    <School :getSchoolName="getSchoolName"></School>

    <!-- 自定义事件(第一种写法)    -->
    <Student v-on:hello="demo" @again="send" ></Student>
   <!-- 若想给组件绑定原生点击事件 则需要在后面加native -->
    <!-- <Student v-on:hello="demo" @again="send" @click.native="show"></Student> -->

    <!-- 自定义事件(第二种写法) -->
     <!-- <Student ref="student"></Student> -->
    </div>
    
</template>

<script>
import School from './components/School'
import Student from './components/Student'
export default {
    name: 'App',
    data() {
        return {
            msg: '你好',
            name:''
        }
    },
    components: {
        School,
        Student
    },
    methods: {
        show() {
            alert(123)
        },
        getSchoolName(value) {
            console.log('收到了学校名字',value)
        },
        demo(value) {
            console.log('收到了学生姓名', value)
            this.name=value
        },
        send(value) {
            console.log('触发了send', value)
        }
    },
    // mounted() {  //$on() 当什么时   this.$refs.student是Student组件实例对象  当绑给Student组件定hello事件时，执行回调demo
    //     this.$refs.student.$on('hello', this.demo)
        
    //     //灵活性强 可以在外面包定时器 延迟绑定
    //     // setTimeout(() => {
    //     //     this.$refs.student.$on('hello',this.demo)
    //     // },3000)
        
    // }
    
}

</script>

子组件

methods: {
        add() {
            this.number++
        },
        sendStudentName() {
            //student触发了hello自定义事件
            this.$emit('hello', this.name)
            // this.$emit('again',this.name)
        },
        unbind() {
            //解绑事件 只能解绑一个事件
            this.$off('hello')
            //解绑多个事件
            // this.$off(['hello', 'again'])
            // //解绑全部自定义事件
            // this.$off()
        },
        death() {
            //销毁后Student实例自定义事件全部不奏效
            this.$destroy()
        }
    }

<template>
    <div class="demo"> 
        <h2>学校名称:{{schoolName}}</h2>
         <h2>学校地址:{{address}}</h2>
         <button @click="sendSchoolName">将学校名字传给APP</button>
 </div>
</template>

<script>
export default {
        name:'School',
        data(){
            return {
            schoolName:'西邮',
            address:'西安'
        }
    },
    props:['getSchoolName'],
    methods: {
        sendSchoolName() {
            this.getSchoolName(this.schoolName)
        }
      }
    }

</script>

全局事件总线

核心

beforeCreate() {
        //全局事件总线  放在Vue原型对象上 vm和所有vc都可以使用
         Vue.prototype.$bus=this
     }

绑定

this.$bus.$on('hello', (value) => {
            console.log('Student 收到了',value)
        })

调用

 send() {
            this.$bus.$emit('hello',this.schoolName)
        }

消息订阅与发布(不常用)

使用pubsub-js

 mounted() {
        //订阅消息
    this.pubId= pubsub.subscribe('hello',  (messageName,data) =>{
            console.log('student收到了数据',data)
        })
    },
    beforeDestroy() {
        //取消订阅是需要通过id来取消的
        pubsub.unsubscribe(this.pubId)
    }

send() {
            //发布消息
            pubsub.publish('hello',this.address)
        }