一、子组件（对话框）：

效果如下图：

代码如下：

<template>
    <el-dialog title="标题名" :visible.sync="changOrder" :before-close="handleClose" :close-on-click-modal="false">
        <el-form label-width="120px" ref="turntorepairorderform" :model="turntorepairorderform" :rules="rules">
            <el-form-item prop="first" label="项目1：">
                    <el-input v-model="turntorepairorderform.first" ></el-input>
            </el-form-item>
            <el-form-item prop="second" label="项目2：">
                    <el-input v-model="turntorepairorderform.second"></el-input>
            </el-form-item>
            <el-form-item prop="third" label="项目3：">
                    <el-input  v-model="turntorepairorderform.third"></el-input>
            </el-form-item>
            <el-form-item prop="fouth" label="项目4：">
                    <el-input  v-model="turntorepairorderform.fouth"></el-input>
            </el-form-item>
        </el-form>
        <template slot="footer">
            <el-button type="default" @click="handleClose">取消</el-button>
            <el-button type="primary" @click="handleSubmit">提交</el-button>
        </template>
    </el-dialog>
</template>

<script>
    import qs from "qs"
    export default {
        name: "turntorepairorder",
        data(){
            return{
                changOrder: false,
                turntorepairorderform:{//绑定表格数据
                    first:"",
                    second:"",
                    third:"",
                    fouth:""
                },
                rules:{
                    first:[
                        {required: true, message: "项目不能为空", trigger: "blur"}
                    ],
                    second:[
                        {required: true, message: "项目不能为空", trigger: "blur"}
                    ],
                    third:[
                        {required: true, message: "项目不能为空", trigger: "blur"}
                    ],
                    fouth:[
                        {required: true, message: "项目不能为空", trigger: "blur"}
                    ]
                }
            }
        },
        methods:{
            //页面初始化时加载的事件
            init(){
               this.changOrder = true;
            },

            //关闭页面
            handleClose() {
                this.changOrder = false;
                this.$emit("tyonke", this.changOrder);
            },
            //表单提交
            handleSubmit(){

            }
        },
        //监听
        watch:{
            changOrder(newValue, oldValue) {
                this.changOrder = newValue;
            }
        }
    }
</script>

<style scoped>

</style>

二、父组件 ：（点击页面中的按钮会弹出一个上图中的对话框）

效果如下图：

代码如下：

1.首先你需要引入子组件：

import 子组件名 from '子组件的路径'

2.使用子组件：

(1)、父组件的template:

<el-form-item>
	<el-button type="info" @click="turnOrder()">标题</el-button>
</el-form-item>
<!--弹框-->
<turntorepairorder v-if="changOrder" ref="turnOrder"></turntorepairorder>

（2）、data的return里面：

    data(){

           return:{

                changOrder: false,//标题

             }

    }
（3）、components导入一下：

components:{
          子组件名
},

（4）、methods里面：

        turnOrder() {
            let _this = this;
            _this.changOrder = true;
            _this.$nextTick(() => {
                _this.$refs.turnOrder.init();
               })
            },

三、拓展总结：

很多东西看着很简单，但是你不去练习，不去使用可能几天你就忘了，没事多敲！！！

最近经常看前端或者计算机技术别人写的不错博客（个人只是推荐看看，自己也看）：

在vue中通过使用$attrs实现组件之间的数据传递

IoT时代：Wi-Fi“配网”技术剖析总结

「2019 JSConf.Asia - 尤雨溪」在框架设计中寻求平衡

个人能力有限，写的不对的地方还望好心提醒！转载请注明出处！

#vue#element#js#前端