前端Vue2-Day54

ToDoList案例：

组件间通信：

父组件给子组件传参：父组件绑定值至子标签，子组件利用props接收。

子组件给父组件传参：父组件绑定函数至子标签，子组件props接收函数，并设置methods进行进一步调用。

进行勾选操作时，由于此时数据在App组件内，故在App内定义方法修改勾选值，且改变选定事件在子组件Item内，故需要逐层传递方法至Item内部进行调用。

 

 -----------------App.vue----------------------
methods: {
    // 勾选or取消todo
    checkTodo(id) {
      this.todos.forEach((e) => {
        if (e.id === id) e.down = !e.down;
      });
    },
  },

------------------List.vue------------------------
<template>
  <ul class="todo-main">
    <Item v-for="todo in todos" :key="todo.id" :todo="todo" :checkTodo="checkTodo" />
  </ul>
</template>

<script>
import Item from "./Item.vue";
export default {
  name: "List",
  components: { Item },
  props:["todos", "checkTodo"]
};
</script>

------------------Item.vue-----------------------
<template>
  <li>
    <label>
      <input
        type="checkbox"
        :checked="todo.down"
        @change="handleCheck(todo.id)"
      />
      <span>{{ todo.title }}</span>
    </label>
    <button class="btn btn-danger" style="display: none">删除</button>
  </li>
</template>

<script>
export default {
  name: "Item",
  // 接受todo对象
  props: ["todo", "checkTodo"],
  methods: {
    handleCheck(id) {
      // 改变对应down值
      this.checkTodo(id);
    },
  },
};
</script>

 这里直接可以在Item.vue内使用v-model进行checked绑定到父组件传入的down值，但不建议使用：props属性为只读属性，不能在子组件内修改！

<template>
  <li>
    <label>
      <input type="checkbox" v-model="todo.down" />
      <span>{{ todo.title }}</span>
    </label>
    <button class="btn btn-danger" style="display: none">删除</button>
  </li>
</template>

 

总结：

1. 组件化编码流程：

① 拆分静态组件：组件按功能拆分，命名不能与html元素冲突。

② 实现动态组件：考虑好数据存放位置（数据是一个组件用还是一群组件在用）

• 一个组件在用：放在组件自身使用
• 一些组件在用：放在他们公共的父组件上（状态提升）

③ 实现交互：绑定事件

2. props适用于：

① 父组件 ===> 子组件 间通信

② 子组件 ===> 父组件 间通信 (父组件先传递给子组件函数，子组件回调父组件函数传值)

3. 使用v-model是切记：v-model绑定的值不能是props传的值。由于props不可修改，应为只读属性！

4. props传值若为对象类型，则修改对象中属性Vue不会报错，但不推荐这样做。

 

本地存储：webStorage (localStorage/sessionStorage)

1.存储内容大小一般支持5MB左右.

2.浏览器通过window.localStorage和window.sessionStorage属性实现本地存储

3.相关API：

① setItem('key'，'value')：将指定键值对存入，若有相同key，则更新其值。

② getItem('key')：获取指定key对应值。

③ removeItem('key')：删除指定key对应键值对。

④ clearItem()：清空存储。

备注：

1. sessionStorage存储内容会随着浏览器窗口关闭而消失。

2. localStorage存储内容，需要手动清除才会消失。

3. 若getItem对应value获取不到则返回值为null。