使用VUE和Element 建立一個dialog對話框元件的詳細過程

一、子元件（對話框）：

效果如下圖：

代碼如下：

<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“配網”技術剖析總結​​