通过$emit语法糖进行父子组件通信

$emit

使用emit可以让我们方便的从子组件向父组件传递属性传递值

如以下例子，我想要通过父子组件互相传递值的方法控制对话框Dialog的显示或者关闭

父组件

我们通过dialogFormVisible这个属性向子组件传递值，并传递了一个方法changeShow过去

在编辑按钮中我们也绑定了一个方法，它可以直接让子组件显示

<template>
  <div>
      <Add :form="form" :dialogFormVisible="dialogFormVisible" @changeShows="changeShow"></Add>
      <el-table
        :data="tableData"
        style="width: 100%;text-align: center;"
        stripe
        border>
        <el-table-column
          prop="index"
          label="序号"
          width="180">
        </el-table-column>
        <el-table-column
          prop="PICKNO"
          label="单号"
          width="180">
        </el-table-column>
        <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                <el-button
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.$index, scope.row)">删除</el-button>
              </template>
            </el-table-column>
      </el-table>
  </div>
</template>

<script>
  import Add from './add.vue'
   export default {
      data() {
        return {
          tableData: [{
            index:1,
            PICKNO: 'JH20210408'
          }],
          form: {
            PICKNO: ''
          },
          dialogFormVisible:false

        }
      },
      components:{
        Add
      },
      methods:{
        handleEdit:function(index,row){
          const form={
            PICKNO:row.PICKNO
          }
          this.form=form;
          this.dialogFormVisible=true;
        },
        changeShow(dialogFormVisible){
          this.dialogFormVisible=dialogFormVisible;
        }
      }
    }
</script>

<style>
</style>

子组件

我们在子组件中使用props获取父组件传递过来的值,然后在method定义了一个方法，使用$emit来调用父组件传递的方法来改变父组件属性的值，第一个参数时传过来的方法名称，在父组件中定义了:@changeShows="changeShow"，第二个参数就是传递过来的方法的参数了

<template>
  <div style="text-align: end;">
    <el-button type="primary" style="" @click="cancle(true)">新增</el-button>
    <el-dialog width="1200px" title="" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <table>
          <tr>
            <td>
              <el-form-item label="单号" :label-width="formLabelWidth">
                <el-input v-model="form.PICKNO" autocomplete="off"></el-input>
              </el-form-item>
            </td>
            <td>
          </tr>
        </table>
        <el-table>

        </el-table>
      </el-form>
      <div style="text-align: center;">
        <el-button @click="cancle(false)">取 消</el-button>
        <el-button type="primary" @click="cancle(false)">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default{
    name:"add",
    data(){
      return{
        formLabelWidth: '70px'
      }
    },
    props:{
      form:Object,
      dialogFormVisible:Boolean
    },
    methods:{
      cancle(isShow){
        this.$emit("changeShows",isShow);
      }
    }
  }
</script>

<style>
</style>

高级写法

我又学会了一种更简单的写法，主要代码如下

1.父组件在<template>中引用子组件时,需要传递的属性后面记得加一个.sync,然后我们就不需要跟之前一样传递一个方法过去了

2.子组件可以直接在$emit中这样写"update:xxx",这个update是固定写法，后面跟的xxx是父组件data中声明的属性，第二个参数是要传递的属性值

//子组件
<template>
	<el-button type="primary" style="" @click="cancle(true)">新增</el-button>
    <el-dialog :visible.sync="dialogFormVisible"
    </el-dialog>    
</template>
<script>
    export default{
    	props:{
            dialogFormVisible:Boolean
        },
        methods:{
            cancle(isShow){
                this.$emit("update:dialogFormVisible",isShow);
            }
        }
    }
</script>

//父组件
<template>
    <Add :form="form" :dialogFormVisible.sync="dialogFormVisible"></Add>
</template>
<script>
    export default{
        data(){
            return{
                dialogFormVisible:false
            }
        }
    }
</script>