vue element dialog 弹窗单独组件

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

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

<template>
  <div>
	<!-- Form -->
	<el-button type="text" @click="dialogFormVisible = true">打开嵌套表单的 Dialog</el-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