Vue练习(修改为自定义事件)

<template>
  <div>
    <!-- 添加增加方法  传递给子组件-->
    <!-- 垃圾方法 -->
    <!-- <Shijian :addTodo="addTodo" /> -->
    <!-- 使用新方法 -->
    <!-- 监听绑定 -->
        <Shijian ref="header" />
    <!-- 传递给子组件数据 -->
    <!-- 传递删除方法 子组件-->
    <Shijianone :todos="todos" :delTodo="delTodo" />
    <!-- 传递给子组件 -->
    <Shijiantwo
      :todos="todos"
      :selectedAllTodo="selectedAllTodo"
      :delFinishedTodos="delFinishedTodos"
    />
  </div>
</template>

<script scoped>
import Shijian from "@/components/Shijian";
import Shijianone from "@/components/Shijianone";
import Shijiantwo from "@/components/Shijiantwo";
import localStorageUtil from "@/utils/localStorageUtil";
export default {
  name: "Body",
  data() {
    return {
      todos: localStorageUtil.readTodos(),
    };
  },
  components: {
    Shijian,
    Shijianone,
    Shijiantwo,
  },
  // 使用新方法钩子监听  Shijian addTodo自定义事件
  mounted(){
    // 绑定自定义事件(addTodo)监听
    // this.addTodo())这里面的小括号不用写
    this.$refs.header.$on('addTodo',this.addTodo)
 },
  // 使用新方法钩子监听
  // 添加删除方法
  // 添加增加方法
  methods: {
    // 插入数据   参数为(数据)
    addTodo(todo) {
      // 传递数据 (todo)
      this.todos.unshift(todo);
    },
    delTodo(index) {
      // 删除一条
      this.todos.splice(index, 1);
    },
    // 是否选中所有任务
    selectedAllTodo(isCheck) {
      this.todos.forEach((todo) => {
        todo.finished = isCheck;
      });
    },
    // 选中删除的方法
    delFinishedTodos() {
      this.todos = this.todos.filter((todo) => !todo.finished);
    },
  },
  watch: {
    // 深度监视
    todos: {
      // 一旦监听到变化,就保存到本地
      // .saveTodos加了()会报错
      // 执行保存操作
      handler: localStorageUtil.saveTodos,
      // deep: true,深度监视
      deep: true,
      // immediate为true 一进来就执行handler函数
      immediate: true,
    },
  },
};
</script>


<style scoped>
</style>

<template>
  <div>
    <h3>上</h3>
    <!-- 绑定的值 -->
    <!-- 绑定回车键输入提交 -->
    <input
      type="text"
      placeholder="输入的值"
      v-model="title"
      @keyup.enter="addItem"
    />
  </div>
</template>

<script>
export default {
  name: "Shijian",
  // 使用新方法不用接收
  //   接收方法
  // props: {
  //   //   回车为添加的方法
  //   addTodo: Function,
  // },
  // 使用新方法不用接收
  data() {
    return {
      //   输入title 默认为空
      title: "",
    };
  },
  //   是上面绑定的方法
  methods: {
    addItem() {
      alert("添加成功");
      // 1.判断是否为空
      const title = this.title.trim();
      if (!title) {
        alert("不能为空");
        return;
      }
      // 2.生成一个todo对象
      // 并且使finished默认为否(因为数据里面设置两个值)
      let todo = { title, finished: false };
      // 3.调用父组件插入方法
      // this.addTodo(todo);
      // 3.使用自定义事件,父组件监听子组件(这里是子组件)
      // this.$emit('提交的东西',参数)   
         this.$emit('addTodo',todo);
      // 4.清空输入框
      this.title = "";
    },
  },
};
</script>

<style>
</style>

<template>
  <div>
    <!-- 鼠标进入时候显示删除 -->
    <!-- 鼠标离开不显示删除 -->
    <!-- 调用函数传递值 dealShow(true) -->
    <!-- 动态绑定背景色 -->
    <li @mouseenter="dealShow(true)" @mouseleave="dealShow(false)" :style="{backgroundColor:bgColor}" >
      <label>
        <input type="checkbox" v-model="todo.finished" />
        <span>{{ todo.title }}</span>
      </label>
      <!-- 绑定删除事件 触发函数方法 -->
      <button v-show="isShowDelButton" @click="delFour">删除</button>
    </li>
  </div>
</template>

<script>
export default {
  name: "ShijianFour",
  props: {
    todo: Object,
    // 传递下标,让删除组件知道删除的下标
    index:Number,
    // 接收到父组件的父组件的传递函数方法
    delTodo:Function,
  },
  //   设定显示删除按钮    数据绑定
  data() {
    return {
      isShowDelButton: false,
    //   传递动态背景颜色
    bgColor:"#fff"
    };
  },
  //   处理删除方法
  methods: {
    //   设置默认为不显示
    //   delShow(isShow){
    dealShow(isShow) {
        //    dealShow(isShow=false) {
        // 打印出来,这样可一让用户渐渐卡死,消减用户体验 
        // console.log(isShow)
        // 控制按钮和隐藏
      this.isShowDelButton = isShow;
    //   当isShow为真显示ddd,假显示fff
      this.bgColor=isShow?'#ddd':'#fff';
    },
    delFour(){
        // 弹出窗口确定删除
        if(window.confirm(`确定要删除  ${this.todo.title} 么?`)) {
            // 传递删除的下标
            this.delTodo(this.index);
        }
    }
  },
};
</script>

<style>
</style>

<template>
  <div>
    <h3>列表</h3>
    <ul>
        <!-- 传递父组件的给子子组件:delTodo="delTodo"  -->
      <ShijianFour v-for="(todo, index) in todos" :todo="todo" :index="index" :delTodo="delTodo" />
    </ul>
  </div>
</template>

<script>
// 再取子组件
import ShijianFour from "./ShijianFour";
export default {
  name: "Shijianone",
  //   接受父组件的数据
  props: {
    todos: Array,
    // 接受父组件的函数方法,删除
    delTodo:Function,
  },
  components: {
    ShijianFour,
  },
};
</script>

<style>
</style>

<template>
  <div>
    <h3>下</h3>
    <label>
      <input type="checkbox" v-model="isCheck" />
    </label>
    <span>
      <span>已经完成{{ finishedCount }}件</span>
      总共{{ todos.length }}件</span
    >
    <button @click="delFinishedTodos">清除选中</button>
  </div>
</template>

<script>
export default {
  name: "Shijiantwo",
  // 接收参数
  props: {
    todos: Array,
    selectedAllTodo: Function,
    delFinishedTodos: Function,
  },
  computed: {
    finishedCount() {
      return this.todos.reduce(
        // todo.finished ? 1 : 0  意思使为true返回1    后面的),0) 为初始值为0
        (total, todo) => total + (todo.finished ? 1 : 0),
        0
      );
    },
    // 是否选中
    isCheck: {
      get() {
        return (
          this.finishedCount === this.todos.length && this.todos.length > 0
        );
      },
      set(value) {
        this.selectedAllTodo(value);
      },
    },
  },
};
</script>

<style>
</style>