Vue父子组件通信的三种方式 props、@eventName、$on

前言

vue 开发中，免不了会用到父子组件的通信，比如调用父类组件的方法或者变量；再比如父组件调用子组件的方法；父子组件相互传递数据等，本文主要通过讲解 三种方式（props、$evnetName、$on） 的使用，来完成父子组件之间的通信。

重点知识

1、props 父子通信

在父组件中，通过引入子组件，在html部分通过子组件标签进行数据传递给对应的子组件，在子组件中，通过使用 props 来接收，并处理。

我们传递的时候，数据绑定的名称尽量保持与需要传递的值保持一致，这样不容易搞混乱。
另外，如果子组件要对父组件的数据进行操作的话，需要将操作的方法与数据保持在同一个组件内。（即数据在哪，方法在哪）

先来创建父组件，App.vue :

<template>
  <div class="todo-container">
    <div class="todo-wrap">
      <!-- 通过 :addTodo 向子组件传递了一个函数 -->
      <TodoHeader :addTodo="addTodo"/>
      <!-- 通过 :todos 向子组件传递了一个变量 -->
      <TodoList :todos="todos" :deleteTodo="deleteTodo"/>
      <TodoFooter :todos="todos" :deleteCompleteTodos="deleteCompleteTodos" :selectAll="selectAll"/>
    </div>
  </div>
</template>

<script>
  import TodoHeader from './components/TodoHeader.vue'
  import TodoList from './components/TodoList.vue'
  import TodoFooter from './components/TodoFooter.vue'

  export default {
    components: {
      TodoHeader,
      TodoList,
      TodoFooter
    }
    data () {
      return {
        todos: [
          {
            title: '吃饭',
            complete: false
          },
          {
            title: '睡觉',
            complete: false
          },
          {
            title: '打豆豆',
            complete: false
          }
        ]
      }
    },
    methods: {
      addTodo (todo) {
        this.todos.unshift(todo)
      },
      deleteTodo (index) {
        this.todos.splice(index, 1)
      },
      // 删除所有已完成的
      deleteCompleteTodos () {
        this.todos = this.todos.filter(todo => !todo.complete)
      },
      // 全选/全不选
      selectAll (isSelectAll) {
        this.todos.forEach(todo => {
          todo.complete = isSelectAll
        })
      }
    }
  }
</script>

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

创建子组件，在子组件中，通过声明 props 来接收父组件传递过来的值，TodoHeader.vue：

<template>
  <div class="todo-header">
    <input type="text" placeholder="请输入你的任务名称，按回车键确认" v-model="inputTodo" @keyup.enter="add"/>
  </div>
</template>

<script>
  export default {
    props: {
      addTodo: { // 指定属性名, 属性值的类型, 必要性，这里写的addTodo 就是父组件 :addTodo 的定义，需要保持一致
        type: Function,
        required: true
      }
    },
    data () {
      return {
        inputTodo: ''
      }
    },
    methods: {
      add () {
        // 得到输入的数据
        const inputTodo = this.inputTodo.trim()
        // 检查合法性
        if(!inputTodo) {
          alert('必须输入')
          return
        }
        // 封装一个todo对象
        const todo = {
          title: inputTodo,
          complete: false
        }
        // 通过调用父类的方法，将数据保存到父类的变量中
        this.addTodo(todo)
        // 清除输入
        this.inputTodo = ''
      }
    }
  }
</script>

<style>
  .todo-header input {
    width: 560px;
    height: 28px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 4px 7px;
  }

  .todo-header input:focus {
    outline: none;
    border-color: rgba(82, 168, 236, 0.8);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
  }
</style>

再来创建子组件TodoList.vue，其用法相同，只不过，在这个里面，又引入了它自己的子组件，也就是App.vue父组件的孙组件：

<template>
  <ul class="todo-main">
    <TodoItem v-for="(todo, index) in todos" :key="index"
              :todo="todo" :deleteTodo="deleteTodo" :index="index"/>
  </ul>
</template>

<script>
  // 引入孙组件
  import TodoItem from './TodoItem.vue'
  
  export default {
    // 声明接收标签属性
    props: ['todos', 'deleteTodo'], // 会成为当前组件对象的属性, 可以在模板中直接访问, 也可以通过this来访问

    components: {
      TodoItem
    }
  }
</script>

<style>
  .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>

接下来，来创建孙组件TodoItem.vue：

<template>
  <li :style="{background: bgColor}" @mouseenter="handleEnter(true)" @mouseleave="handleEnter(false)">
    <label>
      <input type="checkbox" v-model="todo.complete"/>
      <span>{{todo.title}}</span>
    </label>
    <button class="btn btn-danger" v-show="isShow" @click="deleteItem">删除</button>
  </li>
</template>

<script>
  export default {
    props: {// 指定属性名和属性值的类型
      todo: Object,
      deleteTodo: Function,
      index: Number
    },

    data () {
      return {
        bgColor: 'white',
        isShow: false
      }
    },

    methods: {
      handleEnter (isEnter) {
        if(isEnter) { // 进入
          this.bgColor = '#cccccc'
          this.isShow = true
        } else { // 离开
          this.bgColor = '#ffffff'
          this.isShow = false
        }

      },

      deleteItem () {
        this.deleteTodo(this.index)
      }
    }
  }
</script>

<style>
  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;
  }
</style>

注意，孙组件使用的 deleteTodo 函数，其实是在爷爷组件定义的，首先传递给了子组件，然后通过子组件再传递给了孙组件。

最后来创建剩余的子组件 TodoFooter.vue ：

<template>
  <div class="todo-footer">
    <label>
      <input type="checkbox" v-model="checkAll"/>
    </label>
    <span>
          <span>已完成{{completeSize}}</span> / 全部{{todos.length}}
        </span>
    <button class="btn btn-danger" v-show="completeSize" @click="deleteAllCompleted">清除已完成任务</button>
  </div>
</template>

<script>
  export default {
    //接收父组件传递过来的值
    props: {
      todos: Array,
      deleteCompleteTodos: Function,
      selectAll: Function
    },

    computed: {
      completeSize () {
        return this.todos.reduce((preTotal, todo) => preTotal + (todo.complete?1:0) ,0)
      },

      checkAll: {
        get () { // 决定是否勾选
          return this.completeSize===this.todos.length && this.completeSize>0
        },

        set (value) {// 点击了全选checkbox  value是当前checkbox的选中状态(true/false)
          this.selectAll(value)
        }
      },
    },

    methods: {
      deleteAllCompleted () {
        if(window.confirm('确定清除已完成的吗?')) {
          this.deleteCompleteTodos()
        }
      }
    }
  }
</script>

<style>
  .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>

这里的几个子孙组件，都是使用 props 来接收父组件传递的值，几种写法都是可以的。

挂一个官网的地址，有兴趣的小伙伴，可以去看一下：https://cn.vuejs.org/v2/api/#props

2、$eventName 父子通信（函数）

此种方式只适合父子组件之间的通信，不适合爷孙之间的通信，了解了上面的 props ，使用这种方式，就很简单，也很容易理解。

首先父组件定义函数，绑定到子组件的标签上，下面来看一下两种传递方式的写法不同之处：

<!-- 通过 :addTodo 向子组件传递了一个函数, 这是通过 props的方式传递的，可以传递函数，也可以传递变量值 -->
<TodoHeader :addTodo="addTodo"/>

<!-- 通过 @addTodo 向子组件传递了一个函数, -->
<TodoHeader @addTodo="addTodo"/>

传递方式变了，那么子组件的调用方式自然也不同：

// 原的方式
props: {
	addTodo: Function
}

//使用@eventName 传递到子组件的函数，不需要接收，直接使用$emit 进行触发父组件中的函数，第一个为父组件中传递的函数名，第二个参数为函数的参数。
this.$emit('addTodo', todo)

3、$on 父子通信

这种方式平时用的不多，也是通过绑定函数，只不过是在生命周期中进行绑定：

<TodoHeader ref="header"/>

// 在钩子函数中进行绑定，使用 $on
mounted () {
  // 绑定自定义事件(addTodo)监听，第一个参数，为绑定的事件名称，子页面也是通过$emit来触发，第二个为具体的函数
  this.$refs.header.$on('addTodo',  this.addTodo)
},

好了，平时常用的几种通信方式就先写这么多。