【Vue.js】Vue.js中的事件处理、过滤器、过渡和动画、组件的生命周期及组件之间的通信

╰+攻爆jí腚メ 2022-12-10 07:11 9阅读 0赞

## 1、事件处理 ##

#### 事件绑定监听 ####

*  v-on:xxx=“func”
 *  @xxx=“func”
 *  @xxx=“func(参数)”

#### 参数 ####

*  默认事件形参：event
 *  隐含属性对象：`$event`（在原生事件中，`$event`是事件对象，在自定义事件中，$event是传递过来的数据）

#### 事件修饰符 ####

*  .prevent：阻止事件的默认行为 event.preventDefault()
 *  .stop：停止事件冒泡 event.stopPropagation()

#### 按键修饰符 ####

*  .keycode：操作的是某个keycode值的键
 *  .enter：操作的是enter键
 *  .tab：操作的是tab键
 *  .delete：操作的是“删除”和“退格”键
 *  .esc：操作的是ESC键
 *  .space：操作的是空格键
 *  .up：键抬起
 *  .down：键按下
 *  .left：操作的是左箭头
 *  .right：操作是是右箭头

#### 示例代码 ####

## DealEvents.vue
    
    <template>
        <div>
            <button @click="clickBtn('撩课', $event)">点我</button>
    
            <h3>事件修饰符</h3>
            <a href="http://www.itlike.com" @click.prevent="aClick">撩课</a>
            <div style="width: 100px; height: 100px; background-color:red;" @click="divClick">
                <button @click.stop="btnClick">点我</button>
            </div>
    
            <h3>按键修饰符</h3>
            <input type="text" @keyup.enter="dealKey">
        </div>
    </template>
    
    <script> export default { name: "DealEvents", methods:{ clickBtn(args, event){ console.log(args); console.log(event); }, aClick(){ alert(0); }, btnClick(){ alert('点击了里面的按钮'); }, divClick(){ alert('点击了父标签'); }, dealKey(event){ console.log(event['keyCode']); } } } </script>
    
    <style scoped> </style>

## App.vue
    
    <template>
        <div id="app">
            <DealEvents />        
        </div>
    </template>
    
    <script> import DealEvents from './components/DealEvents' export default { name: 'app', components: { DealEvents } } </script>
    
    <style> </style>

## 2、过滤器 ##

#### 概念 ####

*  对要显示的数据进行特定格式化后再显示
 *  并没有改变原本的数据, 而是产生新的对应的数据

#### 定义过滤器 ####

*  全局定义

// 注册全局过滤器
    Vue.filter('totalMonetFormat', (value)=>{ 
       return '¥' + Number(value).toFixed(3);
    });

*  局部定义

filters: { 
       moneyFormat(value) { 
           return '¥' + Number(value).toFixed(2);
       },
       timeFormat(value, format='YYYY-MM-DD HH:mm:ss'){ 
           return moment(value).format(format);
       }
    }

#### 使用过滤器 ####

<template>
        <div>
            <h3>格式化人民币</h3>
            <p>局部过滤：{
       {money | moneyFormat}}</p>
            <p>局部过滤：{
       {page | moneyFormat}}</p>
            <p>全局过滤：{
       {money | totalMonetFormat}}</p>
            <p>全局过滤：{
       {page | totalMonetFormat}}</p>
            <p>------------------------------------------------</p>
            <h3>格式化日期</h3>
            <p>{
       {time | timeFormat}}</p>
            <p>{
       {time | timeFormat('YYYY-MM-DD')}}</p>
            <p>{
       {time | timeFormat('HH:mm:ss')}}</p>
        </div>
    </template>

#### 示例代码 ####

## main.js
    
    import Vue from 'vue'
    import App from './App.vue'
    
    Vue.config.productionTip = false;
    
    // 注册全局过滤器
    Vue.filter('wholeMoneyFormat', (value)=>{ 
    	return '¥' + Number(value).toFixed(4);
    });
    
    new Vue({ 
    	render: h => h(App),
    }).$mount('#app');

## LkFilters.vue
    
    <template>
        <div>
            <h3>格式化人民币</h3>
            <p>{
       {money | moneyFormat}}</p>
            <p>{
       {page | moneyFormat}}</p>
            <p>---------------------------------------------</p>
            <p>{
       {money | wholeMoneyFormat}}</p>
            <p>{
       {page | wholeMoneyFormat}}</p>
            <h3>格式化日期</h3>
            <p>{
       {time | timeFormat}}</p>
            <p>{
       {time | timeFormat('YYYY-MM-DD')}}</p>
            <p>{
       {time | timeFormat('HH:mm:ss')}}</p>
        </div>
    </template>
    
    <script> import moment from 'moment' export default { name: "LkFilters", data(){ return { money: 22345, page: 189.4345, time: new Date() } }, mounted(){ setInterval(()=>{ this.time = new Date() }, 1000) }, // 局部过滤器 filters: { moneyFormat(value){ return '¥' + Number(value).toFixed(2); }, timeFormat(value, format='YYYY-MM-DD HH:mm:ss'){ return moment(value).format(format); } } } </script>
    
    <style scoped> </style>

## App.vue
    
    <template>
        <div id="app">
            <LkFilters />
        </div>
    </template>
    
    <script> import LkFilters from './components/LkFilters' export default { name: 'app', components: { LkFilters } } </script>
    
    <style> </style>

## 3、过渡和动画 ##

#### 概念 ####

*  vue通过操作 css 的 trasition 或 animation可以给特定的目标元素添加/移除特定的 class

#### 过渡的相关类名 ####

*  xxx-enter/xxx-leave-to：指定隐藏时的样式
 *  xxx-enter-active: 指定显示的 transition
 *  xxx-leave-active: 指定隐藏的 transition

#### 操作步骤 ####

*  在目标元素外包裹`<transition name="xxx">`
 *  定义class样式：指定过渡样式（transition），指定隐藏时的样式（opacity/其它）

#### 示例代码 ####

## TransitionAndAnimate.vue
    
    <template>
        <div>
            <button @click="show = !show">切换</button>
            <transition name="fade">
                <div class="box" v-if="show">撩课学院</div>
            </transition>
        </div>
    </template>
    
    <script> export default { name: "TransitionAndAnimate", data(){ return { show: false } } } </script>
    
    <style scoped> .box{ width: 200px; height: 200px; background-color: red; color: #fff; font-size: 20px; display: flex; justify-content: center; align-items: center; } .fade-enter, .fade-leave-to{ opacity: 0; transform: translateX(200px) scale(3); } .fade-enter-active, .fade-leave-active{ transition: all 2s ease-in-out; } </style>

## TransitionAndAnimateTwo.vue
    
    <template>
        <div>
            <button @click="flag = !flag">切换</button>
            <p></p>
            <transition name="bounce">
                <img v-if="flag" :src="pic" alt="">
            </transition>
        </div>
    </template>
    
    <script> import pic from '@/assets/img_02.jpg' export default { name: "TransitionAndAnimateTwo", data() { return { pic: pic, flag: false } } } </script>
    
    <style scoped> .bounce-enter-active { animation: bounce 1s; } .bounce-leave-active { animation: bounce 1s reverse; } @keyframes bounce { 0% { transform: scale(0); } 25% { transform: scale(0.2); } 50% { transform: scale(0.4); } 75% { transform: scale(0.6); } 100% { transform: scale(1); } } </style>

## TransitionAndAnimateThree.vue
    
    <template>
        <div>
            <button @click="flag = !flag">切换</button>
            <p></p>
            <transition enter-active-class="animated rollIn" leave-active-class="animated rollOut" :duration="{ enter: 1000, leave: 500 }" >
                <img v-if="flag" :src="pic" alt="">
            </transition>
        </div>
    </template>
    
    <script> import pic from '@/assets/img_02.jpg' import animate from 'animate.css' export default { name: "TransitionAndAnimateThree", data() { return { pic: pic, flag: false } } } </script>
    
    <style scoped> </style>

## App.vue
    
    <template>
        <div id="app">
            <TransitionAndAnimate />
            <TransitionAndAnimateTwo />
            <TransitionAndAnimateThree />
        </div>
    </template>
    
    <script> import TransitionAndAnimate from './components/TransitionAndAnimate' import TransitionAndAnimateTwo from './components/TransitionAndAnimateTwo' import TransitionAndAnimateThree from './components/TransitionAndAnimateThree' export default { name: 'app', components: { TransitionAndAnimate, TransitionAndAnimateTwo, TransitionAndAnimateThree } } </script>
    
    <style> </style>

## 4、组件的生命周期 ##

#### 生命周期图示 ####

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center][]

#### 钩子函数 ####

*  初始化显示

1.  beforeCreate()
2.  created()
3.  beforeMount()
4.  mounted()

*  更新状态

1.  beforeUpdate()
2.  updated()

*  销毁 vue 实例

1.  beforeDestory()
2.  destoryed()

#### 常用的生命周期方法 ####

*  created()/mounted()：发送ajax请求，启动定时器等异步任务
 *  beforeDestory()：收尾操作，比如: 清除定时器、数据缓存

#### 示例代码 ####

## LifeCycle.vue
    
    <template>
        <div>
            <p v-if="isShow">{
       {str1}}</p>
            <p v-else>{
       {str2}}</p>
            <button @click="destory">销毁</button>
        </div>
    </template>
    
    <script> export default { name: "LifeCycle", beforeCreate(){ console.log('1:beforeCreate()'); }, data(){ return { isShow: false, str1: '撩课学院', str2: 'itLike.com' } }, methods:{ destory(){ this.$destroy(); } }, created() { console.log('2:created()'); }, beforeMount() { console.log('3:beforeMount()'); }, mounted() { console.log('4:mounted()'); // 定时器 this.intervalId = setInterval(()=>{ console.log('+++++++++++---++++++++++'); this.isShow = !this.isShow; }, 1000); }, beforeUpdate() { console.log('5:beforeUpdate()'); }, updated() { console.log('6:updated()'); }, beforeDestroy() { console.log('7:beforeDestroy()'); // 清除定时器 clearInterval(this.intervalId); }, destroyed() { console.log('8:destroyed()'); } } </script>
    
    <style scoped> </style>

## App.vue
    
    <template>
        <div id="app">
            <LifeCycle />
        </div>
    </template>
    
    <script> import LifeCycle from './components/LifeCircle' export default { name: 'app', components: { LifeCycle } } </script>
    
    <style> </style>

## 5、组件之间的通信 ##

#### 通信基本原则 ####

*  不要在子组件中直接修改父组件的状态数据
 *  数据和处理数据的函数应该在同一模块内

#### 组件通信常用方式 ####

*  props
 *  自定义事件
 *  消息订阅与发布
 *  vuex

#### 组件通信方式1：props ####

*  在组件内声明所有的 props：

1.  只指定名称：

props: ['name', 'age', 'logDog']

1.  指定名称和类型

props: { 
        name: String,
        age: Number,
        logDog: Function
    }

1.  指定名称、类型、必要性、默认值

props: { 
        name: { type: String, required: true, default:xxx},
    }

*  使用注意

1.  此方式用于父组件向子组件传递数据
2.  所有标签属性都会成为组件对象的属性，模板页面可以直接引用
3.  存在缺陷：  
    （1）如果需要向非子后代传递数据必须多层逐层传递  
    （2）兄弟组件间也不能直接 props 通信, 必须借助父组件才可以

#### 代码示例 ####

## PropsComponent.vue
    
    <template>
        <div>
            <h4>姓名：{
       {name}}</h4>
            <h4>年龄：{
       {age}}</h4>
            <p>{
       {person}}</p>
    
            <button @click="logPerson('大撩撩', 60)">调用方法</button>
        </div>
    </template>
    
    <script> export default { name: "PropsComponent", // props: ['name', 'age'] /* props: { name: String, age: Number, person: Object, logPerson: Function } */ props: { name: { type: String, required: true, default: '撩课'}, age: { type: Number, required: true, default: 20}, person: Object, logPerson: Function } } </script>
    
    <style scoped> </style>

App.vue
    
    <template>
        <div id="app">
             <PropsComponent :age=25 :person="p" :log-person="logPerson" />
        </div>
    </template>
    
    <script> import PropsComponent from './components/PropsComponent' export default { name: 'app', data(){ return { p: { name: '张三丰', age: 600 } } }, components: { PropsComponent }, methods: { logPerson(name, age){ alert(`姓名：${ name}, 年龄：${ age}`); } } } </script>
    
    <style> .word{ width: 300px; height: 200px; background-color: red; color: #fff; display: flex; justify-content: center; align-items: center; } </style>

#### 组件通信方式2：自定义事件 ####

*  绑定事件监听：

<button @click="btnClick">删除父标签P</button>
      
      this.$emit('btnClick', {name: '小撩', age: 25, sex:'女'});

*  触发事件：

<CustomEvents @btnClick="deleteP"/>
    
     deleteP(args){
          console.log(args);
          this.$refs.word.remove();
      }

*  指定名称、类型、必要性、默认值：

props: {
        name: {type: String, required: true, default:xxx},
    }

*  使用注意

1.  此方式只用于子组件向父组件发送消息或数据
2.  隔代组件或兄弟组件间通信此种方式不合适

#### 代码示例 ####

## CustomEvents.vue
    
    <template>
        <div>
            <button @click="btnClick">删除父组件的P标签</button>
        </div>
    </template>
    
    <script> export default { name: "CustomEvents", methods: { btnClick(){ // 告诉父组件，我点击了按钮 this.$emit('btnClick', { name: '哈哈哈', sex:'男'}); } } } </script>
    
    <style scoped> </style>

## App.vue
    
    <template>
        <div id="app">
             <CustomEvents @btnClick="deleteP"/>
             <p ref="word" class="word">我是即将被删除的</p>
        </div>
    </template>
    
    <script> import CustomEvents from './components/CustomEvents' export default { name: 'app', data(){ return { } }, components: { CustomEvents }, methods: { deleteP(args){ console.log(args); this.$refs.word.remove(); } } } </script>
    
    <style> .word{ width: 300px; height: 200px; background-color: red; color: #fff; display: flex; justify-content: center; align-items: center; } </style>

#### 组件通信方式3：PubSub 发布订阅 ####

*  安装：

>> npm install --save pubsub-js

*  引入：

import PubSub from ‘pubsub-js’

*  界面操作：

// 发布删除P标签消息
    PubSub.publish("delete-p", { name:"大撩撩", sex:"女", age: 45});
    
    // 订阅关闭弹窗事件，参数event指"delete-p"
    PubSub.subscribe("delete-p", (event, data) => { 
       console.log(data);
       // 删除P标签
       this.deleteP();
     });

*  此方式可实现任意关系的组件间通信，交换数据

#### 深度监视 ####

*  概念：为了发现对象内部值的变化，可以在选项参数中指定 deep: true ；注意监听数组的变动不需要这么做
 *  使用方式：
 *  （1）第一个是handler：其值是一个回调函数；即监听到变化时应该执行的函数
 *  （2）第二个是deep：其值是true或false；确认是否深入监听（一般监听时是不能监听到对象属性值的变化的，数组的值变化可以听到）
 *  （3）第三个是immediate：其值是true或false；确认是否以当前的初始值执行handler的函数

#### 插槽 ####

*  和 HTML 元素一样，我们经常需要向一个组件传递内容，Vue 自定义的 元素可以很愉快的帮助我们实现

## 6、各种版本的TodoList演示组件间通信 ##

*  props属性方式进行组件间通信

## App.vue
    
    <template>
        <div class="todo-container">
            <div class="todo-wrap">
                <Header :addTodo="addTodo"/>
                <List :todos="todos" :delTodo="delTodo"/>
                <Footer :todos="todos" :selectedAllTodo="selectedAllTodo" :delFinishedTodos="delFinishedTodos"/>
            </div>
        </div>
    </template>
    
    <script> // 引入 import Header from './components/Header' import List from './components/List' import Footer from './components/Footer' export default { name: 'app', data() { return { todos: [ { title: '学习Vue的组件通信', finished: true}, { title: '学习React的redux', finished: false}, { title: '写一个Vue的项目', finished: true}, { title: '搬一车的砖', finished: false} ] } }, components: { Header, List, Footer }, methods:{ // 插入一条数据 addTodo(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) } } } </script>
    
    <style> .todo-container { width: 600px; margin: 0 auto; } .todo-container .todo-wrap { padding: 10px; border: 1px solid #ddd; border-radius: 5px; } </style>

## Header.vue
    
    <template>
        <div class="todo-header">
            <input type="text" placeholder="请输入今天的任务清单，按回车键确认" v-model="title" @keyup.enter="addItem" />
        </div>
    </template>
    
    <script> export default { name: "Header", props: { addTodo: Function }, data(){ return { title: '' } }, methods: { addItem(){ // 1. 判断是否为空 const title = this.title.trim(); if(!title){ alert('输入的任务不能为空！'); return; } // 2. 生成一个todo对象 let todo = { title, finished: false}; // 3. 调用父组件的插入方法 this.addTodo(todo); // 4. 清空输入框 this.title = ''; } } } </script>
    
    <style scoped> .todo-header input { width: 560px; height: 28px; font-size: 14px; border: 1px solid #ccc; border-radius: 4px; padding: 4px 7px; outline: none; } .todo-header input:focus { outline: none; border-color: rgba(255, 0, 0, 0.8); box-shadow: inset 0 1px 1px rgba(255, 0, 0, 0.075), 0 0 8px rgba(255, 0, 0, 0.6); } </style>

## List.vue
    
    <template>
        <ul class="todo-main">
            <Item
              v-for="(todo, index) in todos"
              :todo="todo"
              :index ="index"
              :delTodo="delTodo"
            />
        </ul>
    </template>
    
    <script> import Item from './Item' export default { name: "List", props: { todos: Array, delTodo: Function }, components: { Item } } </script>
    
    <style scoped> .todo-main { margin-left: 0px; border: 1px solid #ddd; border-radius: 2px; padding: 0px; } .todo-empty { height: 40px; line-height: 40px; border: 1px solid #ddd; border-radius: 2px; padding-left: 5px; margin-top: 10px; } </style>

## Item.vue
    
    <template>
        <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" class="btn btn-warning" @click="delItem">删除</button>
        </li>
    </template>
    
    <script> export default { name: "Item", props: { todo: Object, index: Number, // 当前任务在总任务数组中的下标位置 delTodo: Function }, data(){ return{ isShowDelButton: false, // false 隐藏 true 显示 bgColor: '#fff' } }, methods: { dealShow(isShow){ // 控制按钮的显示和隐藏 this.isShowDelButton = isShow; // 控制背景颜色 this.bgColor = isShow ? '#ddd' : '#fff'; }, delItem(){ if(window.confirm(`您确定删除 ${ this.todo.title} 吗?`)){ this.delTodo(this.index); } } } } </script>
    
    <style scoped> li { list-style: none; height: 36px; line-height: 36px; padding: 0 5px; border-bottom: 1px solid #ddd; } li label { float: left; cursor: pointer; } li label li input { vertical-align: middle; margin-right: 6px; position: relative; top: -1px; } li button { padding: 4px 10px; float: right; margin-top: 3px; } li:before { content: initial; } li:last-child { border-bottom: none; } </style>

## Footer.vue
    
    <template>
        <div class="todo-footer">
            <label>
                <input type="checkbox" v-model="isCheck"/>
            </label>
            <span>
              <span>已完成{
       {finishedCount}}件</span> / 总计{
       {todos.length}}件
            </span>
            <button class="btn btn-warning" @click="delFinishedTodos">清除已完成任务</button>
        </div>
    </template>
    
    <script> export default { name: "Footer", props: { todos: Array, selectedAllTodo: Function, delFinishedTodos: Function }, computed: { finishedCount(){ return this.todos.reduce((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 scoped> .todo-footer { height: 40px; line-height: 40px; padding-left: 6px; margin-top: 5px; } .todo-footer label { display: inline-block; margin-right: 20px; cursor: pointer; } .todo-footer label input { position: relative; top: -1px; vertical-align: middle; } .todo-footer button { float: right; margin-top: 5px; } </style>

*  props属性方式+深度监视进行组件间通信

## App.vue
    
    <template>
        <div class="todo-container">
            <div class="todo-wrap">
                <Header :addTodo="addTodo"/>
                <List :todos="todos" :delTodo="delTodo"/>
                <Footer :todos="todos" :selectedAllTodo="selectedAllTodo" :delFinishedTodos="delFinishedTodos"/>
            </div>
        </div>
    </template>
    
    <script> // 引入组件 import Header from './components/Header' import List from './components/List' import Footer from './components/Footer' // 引入工具类 import localStorageUtil from './utils/localStorageUtil' export default { name: 'app', data() { return { todos: localStorageUtil.readTodos() } }, components: { Header, List, Footer }, methods:{ // 插入一条数据 addTodo(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: { handler: localStorageUtil.saveTodos, deep: true, // 深度监视 // immediate: true } } } </script>
    
    <style> .todo-container { width: 600px; margin: 0 auto; } .todo-container .todo-wrap { padding: 10px; border: 1px solid #ddd; border-radius: 5px; } </style>

*  自定义事件+发布订阅方式+深度监视+slot插槽方式进行组件间通信

## App.vue
    
    <template>
        <div class="todo-container">
            <div class="todo-wrap">
                <Header ref="header"/>
                <List :todos="todos" :delTodo="delTodo"/>
                <Footer>
                    <input slot="isCheck" type="checkbox" v-model="isCheck"/>
                    <span slot="finish">已完成{
       {finishedCount}}件 / 总计{
       {todos.length}}件</span>
                    <button slot="delete" class="btn btn-warning" @click="delFinishedTodos">清除已完成任务</button>
                </Footer>
            </div>
        </div>
    </template>
    
    <script> // 引入组件 import Header from './components/Header' import List from './components/List' import Footer from './components/Footer' // 引入工具类 import localStorageUtil from './utils/localStorageUtil' import PubSub from 'pubsub-js' export default { name: 'app', data() { return { todos: localStorageUtil.readTodos() } }, computed: { finishedCount() { return this.todos.reduce((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); } } }, components: { Header, List, Footer }, mounted(){ // 绑定自定义事件（addTodo）监听 this.$refs.header.$on('addTodo', this.addTodo); // 订阅消息（delTodo） PubSub.subscribe('delTodo', (msg, token)=>{ // console.log(msg, token); this.delTodo(token); }); }, methods:{ // 插入一条数据 addTodo(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: { handler: localStorageUtil.saveTodos, deep: true, // 深度监视 // immediate: true } } } </script>
    
    <style> .todo-container { width: 600px; margin: 0 auto; } .todo-container .todo-wrap { padding: 10px; border: 1px solid #ddd; border-radius: 5px; } </style>

## Header.vue
    
    <template>
        <div class="todo-header">
            <input type="text" placeholder="请输入今天的任务清单，按回车键确认" v-model="title" @keyup.enter="addItem" />
        </div>
    </template>
    
    <script> export default { name: "Header", data(){ return { title: '' } }, methods: { addItem(){ // 1. 判断是否为空 const title = this.title.trim(); if(!title){ alert('输入的任务不能为空！'); return; } // 2. 生成一个todo对象 let todo = { title, finished: false}; // 3. 调用父组件的插入方法 // this.addTodo(todo); this.$emit('addTodo', todo); // 4. 清空输入框 this.title = ''; } } } </script>
    
    <style scoped> .todo-header input { width: 560px; height: 28px; font-size: 14px; border: 1px solid #ccc; border-radius: 4px; padding: 4px 7px; outline: none; } .todo-header input:focus { outline: none; border-color: rgba(255, 0, 0, 0.8); box-shadow: inset 0 1px 1px rgba(255, 0, 0, 0.075), 0 0 8px rgba(255, 0, 0, 0.6); } </style>

## Item.vue
    
    <template>
        <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" class="btn btn-warning" @click="delItem">删除</button>
        </li>
    </template>
    
    <script> import PubSub from 'pubsub-js' export default { name: "Item", props: { todo: Object, index: Number, // 当前任务在总任务数组中的下标位置 delTodo: Function }, data(){ return{ isShowDelButton: false, // false 隐藏 true 显示 bgColor: '#fff' } }, methods: { dealShow(isShow){ // 控制按钮的显示和隐藏 this.isShowDelButton = isShow; // 控制背景颜色 this.bgColor = isShow ? '#ddd' : '#fff'; }, delItem(){ if(window.confirm(`您确定删除 ${ this.todo.title} 吗?`)){ // this.delTodo(this.index); // 发布消息 PubSub.publish('delTodo', this.index) } } } } </script>
    
    <style scoped> li { list-style: none; height: 36px; line-height: 36px; padding: 0 5px; border-bottom: 1px solid #ddd; } li label { float: left; cursor: pointer; } li label li input { vertical-align: middle; margin-right: 6px; position: relative; top: -1px; } li button { padding: 4px 10px; float: right; margin-top: 3px; } li:before { content: initial; } li:last-child { border-bottom: none; } </style>

## Footer.vue
    
    <template>
        <div class="todo-footer">
            <label>
                <slot name="isCheck"></slot>
            </label>
            <span>
                <slot name="finish"></slot>
            </span>
            <slot name="delete"></slot>
        </div>
    </template>
    
    <script> export default { name: "Footer", } </script>
    
    <style scoped> .todo-footer { height: 40px; line-height: 40px; padding-left: 6px; margin-top: 5px; } .todo-footer label { display: inline-block; margin-right: 20px; cursor: pointer; } .todo-footer label input { position: relative; top: -1px; vertical-align: middle; } .todo-footer button { float: right; margin-top: 5px; } </style>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/500e5262a7794be7aff483b8c21ceda8.png