vue + elementUI 封装Dialog功能 功能中实现父子传参以及子调用父的函数 并且实现vue中prop的双向数据绑定

使用场景：项目中多次使用Dialog功能然后就封装了一个组件，主要是给用户再次确认，以及提示的功能的功能

1.先创建一个子组件主要内容就是DIalog组件的代码，其中有几个可以通过父组件传的变量 

isShowDialog：控制是否显示，也是需要实现双向数据绑定的变量

content：Dialog对话框的主要内容

titleText：对话框的标题

cancelText：取消按钮的文字，可以默认不传

confirmText：确认按钮的文字，可以默认不传

<template>
    <el-dialog
            :title="titleText"
            :visible.sync="showDialog"
            width="30%"
         >
        <span>{{content}}</span>
        <span slot="footer" class="dialog-footer">
    <el-button @click="childOperation('cancel')">{{cancelText}}</el-button>
    <el-button type="primary" @click="childOperation('confirm')">{{confirmText}}</el-button>
  </span>
    </el-dialog>
</template>

<script>
    export default {
        name: "confirmDialog",
        props:{
            isShowDialog: {
                type:Boolean,
                default:true
            },
            content:{
                type:String,
                default:'这是一段信息'
            },
            titleText:{
                type:String,
                default:'提示'
            },
            cancelText:{
                type:String,
                default:'取 消'
            },
            confirmText:{
                type:String,
                default:'确 认'
            }
        },
        data() {
            return {
               showDialog:this.isShowDialog
            };
        },
        created(){
            console.log(this.isShowDialog);
        },
        methods: {
            childOperation(value) {
                this.$emit('child-operation',value);
            }
        },
        watch: {
            isShowDialog(val) {
                this.showDialog = val;//②监听外部对props属性result的变更，并同步到组件内的data属性myResult中
            },
            showDialog(val){
                this.$emit("on-result-change",val);//③组件内对myResult变更后向外部发送事件通知
            }
        },
    }
</script>

<style scoped>

</style>

2.父组件的主要代码以及使用说明

<template>
 <div id="ServeManage" class="page">

    <el-button type="primary" @click="isShowDialog = true">删除</el-button>
    <confirmDialog :isShowDialog="isShowDialog" content="请确认是否要删除服务内容管理" @on-result-change = "changeIsShowDialog" @child-operation="operation">
    </confirmDialog>
    </div>
  </div>
        
</template>
    import confirmDialog from '../../components/ConfirmDialog.vue'  //组件放在的位置 根据实际修改
    export default {
        name: "ServeManage",
        data(){
            return{
                  isShowDialog:false,
            }
        },
        components: {
          confirmDialog  //引入组件
        },

        methods: {
          operation(type){
            if(type=="confirm"){
             //点击确认要执行的代码
              this.isShowDialog=false;
            }else if (type=='cancel'){
             //点击取消要执行的代码
            }
          },
          changeIsShowDialog(val){
            this.isShowDialog=val;  //监听变化时触发的函数修改父组件的是否显示状态
          }
        }
    };