怎么学建网站,A华企网络网站建设,wordpress编辑器上传图片,wordpress 第一张图片方式一使用$refs 个人比较喜欢用这种的 通过$refs打开的同时 还能给弹窗组件传参 一些框架使用的也是这种方式 父组件
templatedivel-button typetext clickhandleDialogOpen打开嵌套表单的 Dialog/el-buttonDia…方式一使用$refs 个人比较喜欢用这种的 通过$refs打开的同时 还能给弹窗组件传参 一些框架使用的也是这种方式 父组件
templatedivel-button typetext clickhandleDialogOpen打开嵌套表单的 Dialog/el-buttonDialog refDialog/Dialog/div
/templatescript
import Dialog from /components/Dialog.vue
export default {components: {Dialog},data() {return {}},methods: {handleDialogOpen() {this.$refs.Dialog.open(打开弹窗)}},mounted() {}
}
/scriptstyle langless scoped/style
子组件
templateel-dialog title收货地址 :visible.syncdialogFormVisibleel-form :modelformel-form-item label活动名称 :label-widthformLabelWidthel-input v-modelform.name autocompleteoff/el-input/el-form-itemel-form-item label活动区域 :label-widthformLabelWidthel-select v-modelform.region placeholder请选择活动区域el-option label区域一 valueshanghai/el-optionel-option label区域二 valuebeijing/el-option/el-select/el-form-item/el-formdiv slotfooter classdialog-footerel-button clickdialogFormVisible false取 消/el-buttonel-button typeprimary clickdialogFormVisible false确 定/el-button/div
/el-dialog
/templatescript
export default {data () {return {dialogFormVisible: false,form: {name: ,region: ,date1: ,date2: ,delivery: false,type: [],resource: ,desc: },formLabelWidth: 120px}},methods: {open(value) {console.log(value, 父组件传递过来的值)this.dialogFormVisible true}}
}
/scriptstyle langscss scoped/style
方式二 封装弹窗内的内容 弹窗组件直接放在父组件中
父组件
templatedivel-button typetext clickhandleDialogOpen打开嵌套表单的 Dialog/el-buttonel-dialog title收货地址 :visible.syncdialogFormVisibledialogForm//el-dialog/div
/templatescript
import dialogForm from /components/form.vue
export default {components: {dialogForm},data() {return {dialogFormVisible: false}},methods: {handleDialogOpen() {this.dialogFormVisible true}},mounted() {}
}
/scriptstyle langless scoped/style子组件
templateel-form :modelformel-form-item label活动名称 :label-widthformLabelWidthel-input v-modelform.name autocompleteoff/el-input/el-form-itemel-form-item label活动区域 :label-widthformLabelWidthel-select v-modelform.region placeholder请选择活动区域el-option label区域一 valueshanghai/el-optionel-option label区域二 valuebeijing/el-option/el-select/el-form-item/el-form
/templatescript
export default {data () {return {form: {name: ,region: ,date1: ,date2: ,delivery: false,type: [],resource: ,desc: },formLabelWidth: 120px}},methods: {open(value) {console.log(value, 父组件传递过来的值)this.dialogFormVisible true}}
}
/scriptstyle langscss scoped/style其他方式可自行探索
