todoList案例（vue版本）（消息订阅与发布实现组件通信）

父组件向子组件传递数据，使用props即可。
子组件向父组件传递数据，也可以使用props，将props值设置为一个函数即可。
子组件向父组件传递数据，还可以使用自定义事件来实现。
全局事件总线，可以实现任意组件间通信。
消息订阅与发布，也可以实现任意组件间通信。

本篇通过消息订阅与发布实现任意组件间通信，来完成todoList案例。

消息订阅与发布的基本使用

1. npm install --save pubsub-js，安装第三方库pubsub-js。
2. import pubsub from "pubsub-js"，引入第三方库pubsub。
3. 订阅消息：id = pubsub.subscribe(消息名,callback)，且callback的第一个形参默认是消息名，后面则是开发者自己传入的参数。
4. 发布消息：pubsub.publish(消息名,开发者的参数)。
5. 取消订阅：pubsub.unsubscribe(id)。

代码更改涉及以下文件：

1. App.vue，即App组件。
2. List.vue，即List组件。
3. Item.vue，即Item组件。
4. Footer.vue，即Footer组件。

App.vue（App组件)

<template>
  <div id="app">
    <div class="todo-container">
      <div class="todo-wrap">
        <Header/>
        <List :todos="todos"/>
        <Footer :todos="todos"/>
      div>
    div>
  div>
template>

<script>
import pubsub from "pubsub-js";
import Header from './components/Header.vue';
import List from "./components/List.vue";
import Footer from "./components/Footer.vue";

export default {
  name: 'App',
  components: {
    Header,
    List,
    Footer
  },
  data(){
    return {
      todos:[
        {id:"001",title:"吃饭",done:true},
        {id:"002",title:"睡觉",done:true},
        {id:"003",title:"打豆豆",done:false},
      ]
    }
  },
  methods:{
    addTodo(msgName,todoObj){
      this.todos.unshift(todoObj);
    },
    checkTodo(msgName,id){
      this.todos.forEach(todo => {
        if(todo.id === id) todo.done = !todo.done;
      })
    },
    deleteTodo(msgName,id){
      this.todos = this.todos.filter(todo => todo.id!==id);
    },
    clearAllTodoDone(){
      this.todos = this.todos.filter(todo => !todo.done);
    },
    checkAllTodo(msgName,done){
      this.todos.forEach(todo => todo.done = done);
    }

  },
  mounted(){
    this.id_addTodo = pubsub.subscribe("addTodo",this.addTodo);
    this.id_checkTodo = pubsub.subscribe("checkTodo",this.checkTodo);
    this.id_deleteTodo = pubsub.subscribe("deleteTodo",this.deleteTodo);
    this.id_clearAllTodoDone = pubsub.subscribe("clearAllTodoDone",this.clearAllTodoDone);
    this.id_checkAllTodo = pubsub.subscribe("checkAllTodo",this.checkAllTodo);
  },
  beforeDestroy(){
    pubsub.unsubscribe(this.id_addTodo);
    pubsub.unsubscribe(this.id_checkTodo);
    pubsub.unsubscribe(this.id_deleteTodo);
    pubsub.unsubscribe(this.id_clearAllTodoDone);
    pubsub.unsubscribe(this.id_checkAllTodo);
  }
}
script>

<style>
  body {
    background: #fff;
  }

  .btn {
    display: inline-block;
    padding: 4px 12px;
    margin-bottom: 0;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
    border-radius: 4px;
  }

  .btn-danger {
    color: #fff;
    background-color: #da4f49;
    border: 1px solid #bd362f;
  }

  .btn-danger:hover {
    color: #fff;
    background-color: #bd362f;
  }

  .btn:focus {
    outline: none;
  }

  .todo-container {
    width: 600px;
    margin: 0 auto;
  }
  .todo-container .todo-wrap {
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
  }
style>

List.vue（List组件）

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

<script>
import Item from "./Item.vue";

export default {
    name:"List",
    components:{Item},
    props:["todos"]
}
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（Item组件）

<template>
    <li>
        <label>
            <input type="checkbox" :checked="todo.done" @change="handleChange(todo.id)"/>
            <span>{{todo.title}}span>
        label>
        <button class="btn btn-danger" @click="handleClick(todo.id)">删除button>
    li>
template>

<script>
import pubsub from "pubsub-js";
export default {
    name:"Item",
    props:["todo"],
    methods:{
        handleChange(id){
            pubsub.publish("checkTodo",id);
        },
        handleClick(id){
            if(confirm("确定删除吗？")){
                pubsub.publish("deleteTodo",id);
            }  
        }
    }
}
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 {
    float: right;
    display: none;
    margin-top: 3px;
    }

    li:before {
    content: initial;
    }

    li:last-child {
    border-bottom: none;
    }

    li:hover{
        background: #eee;
    }

    li:hover button{
        display: block;
    }
style>

Footer.vue（Footer组件）

<template>
    <div class="todo-footer" v-show="this.total">
        <label>
            <input type="checkbox" :checked="isAllChecked" @change="handleChange"/>
        label>
        <span>
            <span>已完成{{doneTotal}}span> / 全部{{total}}
        span>
        <button class="btn btn-danger" @click="handleClick">清除已完成任务button>
    div>
template>

<script>
import pubsub from "pubsub-js";
export default {
    name:"Footer",
    props:["todos"],
    computed:{
        total(){
            return this.todos.length;
        },
        doneTotal(){
            return this.todos.reduce((pre,todo) => pre + (todo.done ? 1 : 0),0)
        },
        isAllChecked(){
            return this.doneTotal === this.total && this.total > 0;
        }
    },
    methods:{
        handleClick(){
            pubsub.publish("clearAllTodoDone");
        },
        handleChange(event){
            pubsub.publish("checkAllTodo",event.target.checked);
        }
    }
}
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;
    margin-right: 5px;
    }

    .todo-footer button {
    float: right;
    margin-top: 5px;
    }
style>

相关链接

消息订阅与发布