ElementUI Dialog 对话框，vue组件之间传值

这是我参与11月更文挑战的第18天，活动详情查看：2021最后一次更文挑战。

一、概述

在编辑、添加等操作时都用到Dialog对话框，不想全部写在一个组件中，就想重新写个Dialog组件，复用，把Dialog作为子组件，这里涉及到父子组件之间的传值。

二、自定义内容

Dialog 组件的内容可以是任意的，甚至可以是表格或表单，这里应用了 Element 中 Table 和 Form 组件的两个样例。

<el-button type="text" @click="dialogTableVisible = true">打开嵌套表格的 Dialog</el-button>
 
<el-dialog title="收货地址" :visible.sync="dialogTableVisible"> <el-table :data="gridData"> <el-table-column property="date" label="日期" width="150"></el-table-column> <el-table-column property="name" label="姓名" width="200"></el-table-column> <el-table-column property="address" label="地址"></el-table-column> </el-table> </el-dialog>
 
<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>
 
<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 弄' }], dialogTableVisible: false, dialogFormVisible: false, form: { name: '', region: '', date1: '', date2: '', delivery: false, type: [], resource: '', desc: '' }, formLabelWidth: '120px' }; } }; </script>

View Code 点击打开嵌套表单的 Dialog，效果如下：

三、组件之间传值

在实际开发过程中，对于Dialog 对话框，会单独创建一个vue文件，进行处理。这样的话，维护页面比较方便。而不是在一个总的vue文件，涉及几千行代码。

下面使用一个小demo，结合Dialog 对话框，演示组件之间传值。

目标：

1. 父组件HelloWorld.vue，点击添加按钮，调用子组件Goods.vue，

2. 弹出Dialog 对话框。输入表单数据

3. 表单数据回传给父组件HelloWorld.vue

新建一个ElementUI项目，修改文件HelloWorld.vue，完整内容如下：

<template>
  <div class="hello"> <el-row> <el-button type="primary" @click='add()'>添加</el-button> </el-row> // 使用子组件 <Goods ref="gds" @children="parentGoods" /> </div>
</template>
 
<script> import Goods from "./Goods"; export default { name: 'HelloWorld', // 注册组件 components: { Goods }, methods: { add() { // 弹出对话框 this.$refs.gds.showDialog() }, // 子组件传值给父组件-货物 parentGoods(obj) { // 打印子组件传递的值 console.log("parentGoods",obj) } } } </script>
 
<style scoped> </style>

在HelloWorld.vue同级目录下，新建文件Goods.vue

<template>
  <el-dialog title="添加货物" :visible.sync="dialogFormVisible" width="500px">
    <el-form :model="form">
      <el-form-item label="货物名称" :label-width="formLabelWidth">
        <el-input v-model="form.name" autocomplete="off" style="width: 218px"></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="setGoods()">确 定</el-button>
    </div>
  </el-dialog>
</template>
 
<script> export default { name: "Goods", data() { return { dialogFormVisible: false, form: { name: '', region: '', }, formLabelWidth: '120px' } }, methods: { showDialog() { this.dialogFormVisible = true }, setGoods(){ // $emit触发当前实例上的事件 // 触发父组件的children事件，将this.form回传过去 this.$emit('children',this.form) // 关闭对话框 this.dialogFormVisible = false } } } </script>
 
<style scoped>
</style>

vm.$emit(eventName, […args])] —- 触发当前实例上的事件。附加参数都会传给监听器回调。