Vue+element 组件复用

Vue+element组件复用

 

 

父组件改动部分  

 

 
<CreateDialog :createVisible.sync="createShow">CreateDeviceDialog>

   <el-button type="text" @click="createShow = true">创建el-button>
   

 

 

 

路径

 

 

//  改动
//  这个目录下还多了这个文件
import CreateDialog from '路径/文件名.vue'; //此处注意组件的路径

 

 

   components: {
//      改动
      CreateDialog,
    },

 

 

//      改动
createShow: false,

 

 

子组件部分：

//@close 用来实现对话框右上角的小叉子进行关闭

// @opened 用来进行创建初始化

//:visible.sync="createVisible" 父组件给子组件传值时会使用这一属性

 

 

<template>

<el-dialog @close="close"
           @opened="createInit"
           v-dialogDrag
           style="font-size: 10px;" width='750px' heigt='700px'
           title="创建"
            :visible.sync="createVisible">

 

 

//中间是完全复制过来的创建对话框

el-dialog>

 

 

template>

 

export default {
  props: {

//定义父组件给子组件传的值
    createVisible: false
  },

 

 

 

 

 

 

//双向绑定弹出窗口ipput域
form: {

//数据

}

 

//关闭对话框时用子组件给父组件传值的方式实现

close() {
  this.$emit("update:createVisible", false);
},

 

 

 

详细见：

https://blog.csdn.net/weixin_41796631/article/details/83051966