前言：使用Vue进行项目开发的时候，通常会用到Vue提供的组件化机制封装开发所需要的组件以达到开发项目的需求，大到项目中的一快筛选模块、数据表格，小到分页面板、级联面板、乃至一个小小的button按钮，之所以组件化也是为提高我们实际的开发效率，那到底什么是组件化呢？参考一张尤玉溪大大的图就会很快明白；

简单来讲一个完整项目会分为很多部分，每个部分都会有各自独立的功能，每个独立的功能组件又是由很多小的组件构成，了解了什么是组件之后，就必须要明白组件之间的通讯方式。Vue官方为我们提供了子传父、父传子的方法以及属性，但是单纯使用这些是远远不能够满足我们的实际开发需求，因为很多时候我们需要父组件与子组件直接双向绑定数据，但是Vue中父子组件通信，都是单项的数据流，具体如下：

父组件:

<!-- 父组件 -->
<template>
  <div class="Parent">
    <el-col :span="12">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <h2>Parent（父组件）</h2>
          <el-button style="float: right; padding: 3px 0" type="text">查看详情</el-button>
        </div>
        <el-button type="primary" icon="el-icon-plus" circle @click.native="Add(off)"></el-button>
        <Children :Data="off"></Children>
        <el-col :span="12">
          <span>来自子组件的数据：</span>
          {{msg}}
        </el-col>
      </el-card>
    </el-col>
  </div>
</template>

子组件:

<!-- 子组件 -->
<template>
  <div class="Children">
    <el-dialog
      width="30%"
      top="15%"
      title="Children（子组件）"
      :visible.sync="off"
      :before-close="handleClose"
      modal-append-to-body="false"
      append-to-body="false"
    >
      <el-input v-model="input" placeholder="请输入内容"></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="off = false">取 消</el-button>
        <el-button type="primary" @click="off = false">提 交</el-button>
      </span>
    </el-dialog>
  </div>
</template>

预览:

功能：父组件点击“+”按钮之后调用子组件，子组件提交数据、父组件蓝色部分显示子组件提交的数据；

思路：首先得明白子组件显示与否依赖于off，也就是点击"+"号之后，父组件必须改变子组件的off值（子组件数据），父组件data里必须也有个off值用于传递数据（父组件数据），从而达到父子组件数据双向绑定的需求；

接下来改造代码:

<!-- 父组件 -->
<template>
  <div class="Parent">
    <el-col :span="12">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <h2>Parent（父组件）</h2>
          <el-button style="float: right; padding: 3px 0" type="text">查看详情</el-button>
        </div>
        <el-button type="primary" icon="el-icon-plus" circle @click.native="Add()"></el-button>
        <Children :Data="off" @GetData="GetData"></Children>
        <el-col :span="12">
          <span>来自子组件的数据：</span>
          {{msg}}
        </el-col>
      </el-card>
    </el-col>
  </div>
</template>

<script>
import Children from "./Children"; //引入Children
export default {
  components: {
    Children
  },
  data() {
    return {
      msg: "暂无", //穿传递初始数据
      off: false
    };
  },
  methods: {
    Add() {
      this.off = true; //修改off 打开子组件
    },
    GetData(off,input) { //这里的off是接收子组件传递过来的值
      this.off = off; //把子组件的数据同步到父组件中
      this.msg = input; //同上
    }
  }
};

Parent解释：在父组件中引入子组件Children，使用v-bind绑定父组件的off传递给子组件，当点击“＋”号之后执行Add方法改变off为true，使用自定义事件监听子组件事件是否触发，触发之后接收到来自子组件的数据并同步更新到父组件对应的状态；

<!-- 组件说明 -->
<template>
  <div class="Children">
    <el-dialog
      width="30%"
      top="15%"
      title="Children（子组件）"
      :visible.sync="off"
      :modal-append-to-body="false"
      :append-to-body="false"
    >
      <el-input v-model="input" placeholder="请输入内容"></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="Submit(0)">取 消</el-button>
        <el-button type="primary" @click="Submit(1)">提 交</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      input: "",
      off: this.Data //赋初始值 等价于off：false
    };
  },
  props: ["Data"], //接收来自父组件的数据
  watch: {
    Data(N, O) {
      this.off = N; //每次Props数据改变的时候同步更新到off
    }
  },
  methods: {
    Submit(key){
      if(key){          //点击提交按钮
        alert("提交！")
        // if(....)    //此处编写表单效验通过后的业务逻辑
        this.off = false
      }else if(!key){
        alert("取消！") //点击取消按钮
        this.off = false
      }
      this.$emit('GetData',this.off,this.input)
    }
  }
};
</script>

Children解释：props对象接收父组件数据，组件创建完毕之后第27行初始化来自父组件的数据（此处由于父组件中off值为false，所以第一次赋值也是false，注意这里只能赋初始值 后面的父组件传递的数据将不会改动，必须由watch监听变化再更新到data > off），取消/提交调用Submit方法，(38行kye==1 1隐式转换之后为true所以不用麻烦写if(key==1)，42行同理)，执行Submit之后改变off的值为false即关闭子组件，并且使用$emit创建自定义事件GetData (此处GetData必须与父组件中第11行绑定的方法一致才可以触发自定义事件)，触发子组件的GetData事件并且同步更新到父组件中；

至此 结束，看一下效果！