1、安装 npm i --save pubsub-js
2、引入 import PubSub from 'pubsub-js'
1 <template> 2 <li 3 @mouseenter="dealShow(true)" 4 @mouseleave="dealShow(false)" 5 :style="{backgroundColor: bgColor}" 6 > 7 <label> 8 <input type="checkbox" v-model="todo.finished"/> 9 <span>{{todo.title}}</span> 10 </label> 11 <button v-show="isShowDelButton" class="btn btn-warning" @click="delItem">删除</button> 12 </li> 13 </template> 14 15 <script> 16 import PubSub from 'pubsub-js' 17 export default { 18 name: "Item", 19 props: { 20 todo: Object, 21 index: Number, // 当前任务在总任务数组中的下标位置 22 delTodo: Function 23 }, 24 data(){ 25 return{ 26 isShowDelButton: false, // false 隐藏 true 显示 27 bgColor: '#fff' 28 } 29 }, 30 methods: { 31 dealShow(isShow){ 32 // 控制按钮的显示和隐藏 33 this.isShowDelButton = isShow; 34 // 控制背景颜色 35 this.bgColor = isShow ? '#ddd' : '#fff'; 36 }, 37 38 delItem(){ 39 if(window.confirm(`您确定删除 ${this.todo.title} 吗?`)){ 40 // this.delTodo(this.index); 41 // 发布消息 42 PubSub.publish('delTodo', this.index) 43 } 44 } 45 } 46 } 47 </script> 48 49 <style scoped> 50 li { 51 list-style: none; 52 height: 36px; 53 line-height: 36px; 54 padding: 0 5px; 55 border-bottom: 1px solid #ddd; 56 } 57 58 li label { 59 float: left; 60 cursor: pointer; 61 } 62 63 li label li input { 64 vertical-align: middle; 65 margin-right: 6px; 66 position: relative; 67 top: -1px; 68 } 69 70 li button { 71 padding: 4px 10px; 72 float: right; 73 margin-top: 3px; 74 } 75 76 li:before { 77 content: initial; 78 } 79 80 li:last-child { 81 border-bottom: none; 82 } 83 </style> 1 <template> 2 <div class="todo-container"> 3 <div class="todo-wrap"> 4 <Header ref="header"/> 5 <List :todos="todos" :delTodo="delTodo"/> 6 <Footer> 7 <input slot="isCheck" type="checkbox" v-model="isCheck"/> 8 <span slot="finish">已完成{{finishedCount}}件 / 总计{{todos.length}}件</span> 9 <button slot="delete" class="btn btn-warning" @click="delFinishedTodos">清除已完成任务</button> 10 </Footer> 11 </div> 12 </div> 13 </template> 14 15 <script> 16 // 引入组件 17 import Header from './components/Header' 18 import List from './components/List' 19 import Footer from './components/Footer' 20 21 // 引入工具类 22 import localStorageUtil from './utils/localStorageUtil' 23 import PubSub from 'pubsub-js' 24 25 export default { 26 name: 'app', 27 data() { 28 return { 29 todos: localStorageUtil.readTodos() 30 } 31 }, 32 computed: { 33 finishedCount() { 34 return this.todos.reduce((total, todo) => total + (todo.finished ? 1 : 0), 0); 35 }, 36 isCheck: { 37 get() { 38 return this.finishedCount === this.todos.length && this.todos.length > 0 39 }, 40 set(value) { 41 this.selectedAllTodo(value); 42 } 43 } 44 }, 45 components: { 46 Header, 47 List, 48 Footer 49 }, 50 mounted(){ 51 // 绑定自定义事件（addTodo）监听 52 this.$refs.header.$on('addTodo', this.addTodo); 53 // 订阅消息（delTodo） 54 PubSub.subscribe('delTodo', (msg, token)=>{ 55 // console.log(msg, token); msg=delTodo token 参数 56 this.delTodo(token); 57 }); 58 }, 59 methods:{ 60 // 插入一条数据 61 addTodo(todo){ 62 this.todos.unshift(todo); 63 }, 64 // 根据索引删除一条记录 65 delTodo(index){ 66 this.todos.splice(index, 1); 67 }, 68 // 是否选中所有的任务 69 selectedAllTodo(isCheck){ 70 this.todos.forEach(todo => { 71 todo.finished = isCheck 72 }) 73 }, 74 delFinishedTodos(){ 75 this.todos = this.todos.filter(todo=> !todo.finished) 76 } 77 }, 78 watch: { 79 // 深度监视 80 todos: { 81 handler: localStorageUtil.saveTodos, 82 deep: true, // 深度监视 83 // immediate: true 84 } 85 } 86 } 87 </script> 88 89 <style> 90 .todo-container { 91 width: 600px; 92 margin: 0 auto; 93 } 94 95 .todo-container .todo-wrap { 96 padding: 10px; 97 border: 1px solid #ddd; 98 border-radius: 5px; 99 } 100 </style>子组件向父组件传值 props:向父组件的函数传递参数；自定义事件；发布订阅
转载于:https://www.cnblogs.com/zhangzhengyang/p/11279491.html
