vue el-dialog封装成子组件（组件化）

最新推荐文章于 2024-06-17 15:58:57 发布

原创最新推荐文章于 2024-06-17 15:58:57 发布 · 581 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue.js #javascript #前端

收录于

vue2.js 中 el-dialog封装成子组件（组件化）案例分享
子组件没有 .sync

<template>
  <div>
    <el-dialog title="详情" :visible="DialogFlag" width="80%" center 					@close="handleClose">
      <el-table :data="detailsList" style="width: 100%" border>
        <el-table-column prop="customerRelease" label="意见" align="center" />
        <el-table-column prop="remarks" label="备注" align="center" />
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'DialogForm',
  props: {
    DialogFlag: {
      type: Boolean,
      default: false,
    },
    detailsList: {
      type: Array,
      default: () => [],
    },
  },
  methods: {
    handleClose() {
      this.$emit('update:DialogFlag', false);
    },
  },
};
</script>

父组件

// 引入组件
import DialogForm from './components/DialogForm.vue'

//注册组件
 components: {
    DialogForm
  },
  
//data
DialogFlag: false
// details
detailsList: null,

// Dom 注意加 .sync  
<DialogForm :DialogFlag.sync="DialogFlag" :detailsList="detailsList"/>

// 使用组件
  <el-button type="primary"  @click="showTable">打开表单</el-button>
       
 showTable () {
      this.DialogFlag = true
    },