基于ElementUI将Dialog对话框写入组件引入

将Dialog对话框写入组件引入

如果对话框里包含的内容很多的话，和主页面写在一起，代码量会非常大，所以我想采用将Dialog中的内容单独写在一个文件里，然后在主页面引入。
因为并不是公共组件，所以我写在了自己部分的文件夹里。

组件内容：

<template>
    <el-dialog
        title="提示"
        :visible.sync="connPositionDialog"
        width="50%"
    >
        <span>对话框对话框对话框</span>
        
    </el-dialog>
</template>

<script>
export default {
    data() {
        return {
            connPositionDialog: false
        };
    },
    methods: {
        showPosition() {
            this.connPositionDialog = true;
        }
    }
};
</script>

<style>

</style>

在主页面引入：

<template>
    <div>
        <el-button
                type="primary"
                class="addBtn"
                @click="connPosition()"
            >+ 新增</el-button>
    	<connecte-position v-if="positionDialog" ref="connectePosition" />
    </div>
</template>

import connectePosition from './connectePosition.vue';

export default {
    components: {
        connectePosition
    },
    data() {
        return {
            positionDialog: false
        };
    },
    methods: {
        connPosition() {
            this.positionDialog = true;
            // 这里是需要从refs里选择connectePosition里的showPosition()方法，将组件里的connPositionDialog属性改为true，否则弹框不显示
            this.$refs.connectePosition.showPosition();
        }
    }
};

--------------------------------分割线----------------------------
采用以上这种方法，我发现控制台会报错：第一次点击按钮对话框打不开，并且控制台会报错，之后点击才能打开
第一次点击报的错：

应该是第一次点击时，对话框还未完成初始化，所以会提示找不到。
所以采用props中定义属性的方法。

    props: {
        visible: {
            type: Boolean,
            default: false
        },
        postnum: {
            type: Number,
            default: 0
        }
    },

上面的标签里面：

    <el-dialog
        title="关联职位"
        :visible.sync="visible"
        :before-close="handleClose"
        width="50%"
    >

引入组件的地方：

                    <connecte-position
                        :visible.sync="isShowDialog"
                        :postnum="connecteNum"
                    />

isShowDialog是父组件传给子组件的属性值，由子组件中的visible接收。
由于当关闭对话框时，父组件传给子组件的属性值会变化：visible由true变为false，但是数据流是单向从父组件传递到子组件的，会导致父组件接收不到该属性值的变化，所以会出现第二次就打不开的问题。

所以需要在子组件中用传递的值初始化一个单独的属性，然后用v-model绑定，但是由于对话框使用的不是v-model，而是:visible.sync，所以props里要用visible来接收。