父组件向子组件传值

1、dialog子组件

1）dialogTableVisible：控制dialog显示与隐藏 ，初始值false

2）:close-on-click-modal：是否可以通过点击 modal 关闭 Dialog

<template>
  <div class="dialog">
    <el-dialog title="表头" :visible.sync="dialogTableVisible" width="65%"
               :close-on-click-modal="false"  @close="closeDialog">
      <el-form size="mini" :model="ruleForm"  ref="ruleForm">
        <el-row :gutter="0">
          <el-col>
            <el-button type="primary" @click="submitForm()">保存</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
  </div>
</template>

2、父组件引用

<Edit :show.sync="show" :showParentDialog.sync="dialogVisible" :Info="Info"></versionEdit>

3、子组件接收

export default {
    props: {
      Info:{

      },
      show:{
        type: Boolean,
        default:false,
      },
    },
    watch: {
      Info(info) {
        //逻辑处理
      },
      show:{
        handler:function (val) {
          this.dialogTableVisible = val;
        },
        immediate: true
      }
    },
    data() {
      return {
        dialogTableVisible: false,
    },
    created(){
    },
    methods: {
    },
  }

4、更新父组件的值，控制父组件dialog的显示与隐藏，父组件（:visible.sync="dialogVisible"）

this.$emit('update:showParentDialog',true);

5、watch监听不到对象的变化的解决办法（通过object.assign重新创建一个对象）

由
this.Obj = version;

重新创建对象成为能够成功监听到变化
this.Obj = Object.assign({}, this.Obj, version)

父组件向子组件传值

推荐阅读