Vue2 —— 学习（八）

最新推荐文章于 2024-06-12 16:13:25 发布

COLDEHY

最新推荐文章于 2024-06-12 16:13:25 发布

阅读量984

点赞数 30

文章标签：学习

本文链接：https://blog.csdn.net/qq_63342197/article/details/137902092

版权

本文详细介绍了浏览器的webStorage功能，特别是LocalStorage和SessionStorage的使用方法，以及在Vue组件中通过自定义事件进行通信，包括v-on和ref的运用以及解绑事件的方式。

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

二、TodoList 案例使用 storage

一、浏览器 webStorage

（一）介绍

就是比如我们在购物网站搜索了某个商品信息，然后退出网页再进入购物网站，会发现搜索栏下面有搜索历史，这个记录就存在我们浏览器的本地存储。

进入开发者模式然后点击应用栏就是 application

Storage 下面有两个存储一个是 localstorage 本地存储里面就是我们存东西的网站，就是我们访问网站的域名

值是 key value 的形式

（二）LocalStorage

特点：浏览器关闭数据也不会消失清除缓存数据会消失，或者手动删除

向浏览器中添加数据使用 Window 上的方法 localStorage.setItem 设置，里面必须都是字符串

如果给的不是字符串形式它会默认给我们改成字符串形式

<body>
  <h2>localStorage</h2>
  <button onclick="saveData()">点我保存一个数据</button>
  <script>
    function saveData() {
      localStorage.setItem('msg', 'hello')
    }
  </script>
</body>

1.存储数据

要存储对象型的数据我们用 JSON.stringify 把对象转化成字符串即可

    localStorage.setItem('person', JSON.stringify(p))

2.查询/读取数据

查询浏览器中数据使用 Window 上的方法 localStorage.getItem 设即可

如果是对象再 JSON.parse(得到的字符串) 就能得到原来形式的数据

如果没有该数据读出的数据是 null

  function readData() {
     console.log(localStorage.getItem('msg')) 
    }

3.移除数据

移除浏览器中数据使用 Window 上的方法 localStorage.removeItem 设即可

  function deleteData() {
     localStorage.removeItem('msg') 
    }

4.清空数据

清空浏览器中数据使用 Window 上的方法 localStorage.clear() 即可

  function deleteAllData() {
     localStorage.clear()
    }

（三）SessionStorage

特点：关闭浏览器时数据清空

api 与上面 localstorage 一致把名字替换成 sessionStorage 就行

二、TodoList 案例使用 storage

app 更新

<template>
  <div id="root">
    <div class="todo-container">
      <div class="todo-wrap">
        <MyHeader :addTodo="addTodo" />
        <MyList
          :todos="todos"
          :checkTodo="checkTodo"
          :deleteTodo="deleteTodo"
        />
        <MyFooter
          :todos="todos"
          :checkAllTodo="checkAllTodo"
          :clearAllTodo="clearAllTodo"
        />
      </div>
    </div>
  </div>
</template>
<script>
import MyHeader from "./components/MyHeader.vue";
import MyFooter from "./components/MyFooter.vue";
import MyList from "./components/MyList.vue";
export default {
  name: "app",
  components: {
    MyHeader,
    MyFooter,
    MyList,
  },
  data() {
    return {
      todos: JSON.parse(localStorage.getItem("todos")) || [],
    };
  },
  methods: {
    addTodo(todoObj) {
      this.todos.unshift(todoObj);
    },
    checkTodo(id) {
      this.todos.forEach((todo) => {
        if (todo.id === id) todo.done = !todo.done;
      });
    },
    deleteTodo(id) {
      this.todos = this.todos.filter((todo) => {
        return todo.id !== id;
      });
    },
    checkAllTodo(done) {
      this.todos.forEach((todo) => {
        todo.done = done;
      });
    },
    clearAllTodo() {
      this.todos = this.todos.filter((todo) => {
        return !todo.done;
      });
    },
  },
  watch: {
    todos: {
      deep: true,
      handler(value) {
        localStorage.setItem("todos", JSON.stringify(value));
      },
    },
  },
};
</script>

<style>
/*base*/
body {
  background: #fff;
}

.btn {
  display: inline-block;
  padding: 4px 12px;
  margin-bottom: 0;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 1px 2px rgba(0, 0, 0, 0.05);
  border-radius: 4px;
}

.btn-danger {
  color: #fff;
  background-color: #da4f49;
  border: 1px solid #bd362f;
}

.btn-danger:hover {
  color: #fff;
  background-color: #bd362f;
}

.btn:focus {
  outline: none;
}

.todo-container {
  width: 600px;
  margin: 0 auto;
}
.todo-container .todo-wrap {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
}
</style>

三、组件的自定义事件

是组件间的一种通信方式适用于子组件到父组件

原本写法

原本的子组件给父亲组件传东西

就是父亲先传一个函数给儿子然后儿子调用父亲就能得到儿子中的参数

（一）自定义事件 v-on 写法

v-on 可以简写成 @

通过绑定一个自定义事件来实现子给父传递数据名字叫做 hahaha

 <MyStudent v-on:hahaha="getStudentName" />

在 app 编写调用的函数

  getStudentName(name){
      console.log('demo被调用了',name)
    }

在 Student 中写 hahaha 事件，并返回 this.name

就不用props 接收了方便一点

this.$emit('hahaha',this.name) 传数据的语法

 methods: {
    sendStudentName(){
      this.$emit('hahaha',this.name)
    }
  },

仅触发一次

 <MyStudent v-on:hahaha.once="getStudentName" />

（二）ref 写法

使用 ref 属性更好一点如果涉及到延时触发的时候我们可以用 ref

    <MyStudent ref="student" />

设置延时三秒才有 hahaha 事件

 mounted() {
    setTimeout(() => {
      this.$refs.student.$on("hahaha", this.getStudentName);
    }, 3000);
  },

只触发一次

      this.$refs.student.$once("hahaha", this.getStudentName);

（四）解绑自定义事件

1.正常解绑

在谁里面定义的事件就在谁里面解绑

我们在 MyStudent 里面写一个解绑函数

解绑一个事件

 unbind(){
      this.$off('hahaha')
    }

解绑多个事件我们用一个数组把我们要解绑的事件名放进去

 unbind(){
      this.$off(['hahaha','demo'])
    }

解绑所有事件

 unbind(){
      this.$off()
    }

2.销毁实例

如果销毁 vc 实例，里面的自定义事件也同时被销毁，

如果销毁 vm 实例，所有的子组件也同样被销毁，组件里的自定义事件也被销毁

（五）总结

是组件间的一种通信方式

只能子传父

组件上能绑定原生的 dom 事件但是得用native 修饰

      this.$refs.student.$once("hahaha", this.getStudentName);

中的回调函数如果不写在 methods 里面还能直接写在这句话里面但是但是必须用箭头函数否则this 指向会出问题， this 指向调用事件的实例就是 Student 不是我们要的 this 指向

COLDEHY

关注

30
点赞
踩
20

收藏

觉得还不错? 一键收藏
0
评论
Vue2 —— 学习（八）

就是比如我们在购物网站搜索了某个商品信息，然后退出网页再进入购物网站，会发现搜索栏下面有搜索历史，这个记录就存在我们浏览器的本地存储。进入开发者模式然后点击应用栏就是 applicationStorage 下面有两个存储一个是 localstorage 本地存储里面就是我们存东西的网站，就是我们访问网站的域名值是 key value 的形式是组件间的一种通信方式适用于子组件到父组件原本写法原本的子组件给父亲组件传东西。
复制链接

扫一扫