vue+elementUI的一个组件多个页面共用，即组件的复用

因为再vue中，有很多页面都需要用到同样的组件或者是插件，这时候我们就可以把这个通用的组件写到一个文件里面，然后进行组件的复用，很多界面共用一个组件，然后在我们的页面中修改我们自己想要的数值，下面是我自己写的一个弹框例子，可以作为参考，即dialog，因为我们知道在用vue写页面的时候，不管是后台管理系统还是其他页面，弹框提示是少不了的，所以我做了一个弹框提示的复用组件，大家可以根据自己的需求修改组件样式或者里面的内容。而且这里面有关系到父子组件之间的传值问题，这个问题我要说一下，当我们点击我们自己的页面的按钮的时候，跳出的弹框，这时候就是**我们的页面是父组件**，**弹框是子组件**，但是当我们点击弹框里面的按钮，弹框消失，并且现实出弹框的内容的时候，这时候**弹框是父组件**，**而我们的页面确是子组件**，在我的这个例子中，我用到的是vue+elementUI写的，好了，话尽于此，下面是代码部分：

1. 对话框组件的代码：(myDialog.vue)

    <!-- 子组件 -->
    <el-dialog :title="title" :visible.sync="dialogFormVisible" @close="closeDialog">
        <el-form :model="form">
            <el-form-item :label="activityName" :label-width="formLabelWidth">
                <el-input v-model="form.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item :label="activityRegion" :label-width="formLabelWidth">
                <el-select v-model="form.region" :placeholder="placeholder">
                    <el-option :label="activityOne" value="shanghai"></el-option>
                    <el-option :label="activityTwo" value="beijing"></el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="closeDialog">取 消</el-button>
            <el-button type="primary" @click="showData">确 定</el-button>
        </div>
    </el-dialog>
</template>
<script>
    export default {
        props:[
            "dialogShow",
            "title",
            "activityName",
            "activityRegion",
            "placeholder",
            "activityOne",
            "activityTwo"
        ],
        data() {
            return {
                dialogFormVisible: this.dialogShow,
                form: {
                    name: '',
                    region: '',
                    date1: '',
                    date2: '',
                    delivery: false,
                    type: [],
                    resource: '',
                    desc: ''
                },
                formLabelWidth: '120px'
            }
        },
        watch: {
            dialogShow(val) {
                this.dialogFormVisible = false
            }
        },
        methods: {
            closeDialog() {
                this.$emit('dialogShowChange', false)
            },
            showData(){
                this.$emit("showDataTo",false,"叽叽喳喳")
            }
        }
    }
</script>
<style lang="scss" scoped>
</style>

2. 这是我们自己的页面的代码：(dialogDemo.vue)

<template>
<div>        
<!-- 对话框组件 父组件-->
        <div class="dialogDemoContainer">
            <el-button type="primary" @click="dialogShowChange(true)">show dialog</el-button>
            <div v-if="dialogShow" class="dialogBox">
                <my-dialog :title="title" :dialogShow="dialogShow" @dialogShowChange="dialogShowChange" :activityName="activityName"
                 :activityRegion="activityRegion" :placeholder="placeholder" :activityOne="activityOne" :activityTwo="activityTwo" @showDataTo="showData"></my-dialog>
            </div>
        </div>
    </div>
</template>
<script>
import myDialog from '../../components/common/myDialog.vue'
export default {
components: {
            myDialog
        },
data() {
            return {
// 这里面有些东西没用的可以删掉或者注释掉
                content: "",
                editorOption: {},
                dialogFormVisible: false,
                form: {
                    name: '',
                    region: '',
                    date1: '',
                    date2: '',
                    delivery: false,
                    type: [],
                    resource: '',
                    desc: ''
                },
                formLabelWidth: '120px',
                dialogShow: false,
                title: "修改密码",
                activityName: "旧密码",
                activityRegion: "确认密码",
                placeholder: "请输入密码",
                activityOne: "北京",
                activityTwo: "上海"
            }
        },
methods: {
dialogShowChange(val) {
                console.log("val", val);
                this.dialogShow = val
            },
            showData(val,data){
                console.log("val", val);
                this.$message("这是从弹窗子组件中传过来的data值是 "+data)
                this.dialogShow = val
            }
}
}
</script>
<style scoped="scoped" lang="scss">
    .dialogDemoContainer {
        text-align: center;
        padding: 20px;
        .dialogBox {
            text-align: left;
        }
    }
</style>