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.****.net/weixin_41796631/article/details/83051966