vue自定义事件（传值）

 1 <template>
 2     <div class="todo-header">
 3         <input
 4             type="text"
 5             placeholder="请输入今天的任务清单，按回车键确认"
 6             v-model="title"
 7             @keyup.enter="addItem"
 8         />
 9     </div>
10 </template>
11 
12 <script>
13     export default {
14         name: "Header",
15         data(){
16             return {
17                 title: ''
18             }
19         },
20         methods: {
21             addItem(){
22                 // 1. 判断是否为空
23                 const title = this.title.trim();
24                 if(!title){
25                     alert('输入的任务不能为空！');
26                     return;
27                 }
28                 // 2. 生成一个todo对象
29                 let todo = {title, finished: false};
30                 // 3. 调用父组件的插入方法
31                 // this.addTodo(todo);
32                 this.$emit('addTodo', todo);
33 
34                 // 4. 清空输入框
35                 this.title = '';
36             }
37         }
38     }
39 </script>
40 
41 <style scoped>
42     .todo-header input {
43         width: 560px;
44         height: 28px;
45         font-size: 14px;
46         border: 1px solid #ccc;
47         border-radius: 4px;
48         padding: 4px 7px;
49         outline: none;
50     }
51 
52     .todo-header input:focus {
53         outline: none;
54         border-color: rgba(255, 0, 0, 0.8);
55         box-shadow: inset 0 1px 1px rgba(255, 0, 0, 0.075), 0 0 8px rgba(255, 0, 0, 0.6);
56     }
57 </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);
 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>