vue element dialog 弹窗单独组件

大家想要单独弹窗组件，我猜测应该是对表单的提交，这里演示表单弹窗，本人后端开发，有不对的地方勿喷

一、创建单独组件TestDialog.vue，这算是个子组件，代码element官网有

<template>
  <div>
	
	<el-button type="text" @click="dialogFormVisible = true">打开嵌套表单的 Dialogel-button>
	
	<el-dialog title="收货地址" :visible.sync="dialogFormVisible">
	  <el-form :model="form">
	    <el-form-item label="活动名称" :label-width="formLabelWidth">
	      <el-input v-model="form.name" autocomplete="off">el-input>
	    el-form-item>
	    <el-form-item label="活动区域" :label-width="formLabelWidth">
	      <el-select v-model="form.region" placeholder="请选择活动区域">
	        <el-option label="区域一" value="shanghai">el-option>
	        <el-option label="区域二" value="beijing">el-option>
	      el-select>
	    el-form-item>
	  el-form>
	  <div slot="footer" class="dialog-footer">
	    <el-button @click="dialogFormVisible = false">取 消el-button>
	    <el-button type="primary" @click="dialogFormVisible = false">确 定el-button>
	  div>
	el-dialog>
  div>
template>
<script>
  export default {
    data() {
      return {
        gridData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }],
        dialogFormVisible: false, //这里是控制弹窗是否显示的，可以看下哪里引用到了
        form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
        formLabelWidth: '120px'
      };
    }
  };
script>

二、在自己的父组件引入弹窗组件，也就是想要引用dialog弹窗的组件

<template>
  <div>
  	<el-button size="mini" @click="handleEdit()">编辑el-button>
  	<TestDialog ref="TestDialog">TestDialog>  
  div>
template>
<script>
import TestDialog from "@/components/dialog/TestDialog"; //导入弹窗组件
export default {
  components: {
    TestDialog //注册弹窗组件
  },
  methods: {
    handleEdit() {
      this.$refs.TestDialog.dialogFormVisible = true; //用于改变弹窗子组件是否显示的属性
    },
}
script>

这就完成了一个弹窗单独组件的实现，至于父子组件传参可自行百度$refs和prop