vue实现点击按钮，弹出对话框

父组件：

html:

  <el-button @click="uploadDataFile=true">数据上传 </el-button>

     <UploadData :upload-data-file="uploadDataFile" @closeDialog="uploadDataFile=false"></UploadData>

js:

<script>

  import UploadData from '../component/uploadData'

  export default {

    components: {

      UploadData,

    },

}

<script>

子组件：

html:

<el-dialog title="数据上传" :visible.sync="uploadDataFile" width="30%" :before-close="closeDialog"

    custom-class="cloudBody">

    <el-form :model="form">

      <el-form-item label="数据名称" label-width="80px">

        <el-input v-model="form.dataName" autocomplete="off"></el-input>

      </el-form-item>

    </el-form>

    <div slot="footer" class="dialog-footer" style="text-align:center">

      <el-button @click="closeDialog" class="btn">取 消</el-button>

      <el-button type="primary" @click="submit" class="btn">确 定</el-button>

    </div>

  </el-dialog>

js:

 props: ['uploadDataFile'],

methods:{

 //关闭对话框

      closeDialog () {

        this.$emit('closeDialog')

      },

      //点击确定按钮

      submit () {

        this.$emit('closeDialog')

        console.log('提交成功')

      }

}