javascript

ElementUI把Dialog作为一个单独的子组件

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

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

目标：

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

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<template>
  <div class="hello">
    <el-row>
      <el-button type="primary" @click='add()'>添加</el-button>
    </el-row>
    <company ref="company" @children="parentCompany"></company>
  </div>
</template>

<script>
  // 导入组件company
  import company from "./company";

  export default {
    name: 'HelloWorld',
    // 注册组件
    components: {
      company,
    },
    data() {
      return {
        msg: 'Welcome to Your Vue.js App'
      }
    },
    methods: {
      add() {
        // 弹出对话框
        this.$refs.company.showDialog()
      },
      // 子组件传值给父组件-公司
      parentCompany(obj) {
        // 打印子组件传递的值
        console.log("parentCompany",obj)
      },
    },
  }
</script>

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<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="setCompany()">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
  export default {
    name: "company",
    data() {
      return {
        dialogFormVisible: false,
        form: {
          name: '',
          region: '',
        },
        formLabelWidth: '120px'
      }
    },
    methods: {
      showDialog() {
        this.dialogFormVisible = true
      },
      setCompany(){
        // $emit触发当前实例上的事件
        // 触发父组件的children事件，将this.form回传过去
        this.$emit('children',this.form)
        // 关闭对话框
        this.dialogFormVisible = false
      }
    },
  }
</script>

访问首页，效果如下：

点击添加按钮，弹出对话框，输入表单数据，点击确定

查看console，效果如下：