【前端技术】使用v-model封装el-dialog组件实现双向绑定

使用v-model封装el-dialog组件实现双向绑定

一直以来都是通过子组件$emit("update:name",payload),父组件使用.sync事件后缀来实现双向绑定的,经提醒发现使用v-model封装自定义组件则更方便理解与使用,于是有了这次尝试与这篇文章

一个弹框作为一个组件,一个变量控制dialog显示和关闭,在dialog内部可关闭,父组件也可关闭

<template>

<div>

<!-- 父组件使用该组件,v-model的值可以是任意变量 -->

<dialog-a

v-model="show1"

other-prop="8888"

/>

<el-button @click="handleOpenDialog">显示弹框</el-button>

</div>

</template>

<script>

import DialogA from './dialog-a'

export default {

components: {

DialogA

},

data() {

return {

show1: false

}

},

methods: {

handleOpenDialog() {

this.show1 = true

}

}

}

</script>

// 子组件

<template>

<el-dialog

title="我是弹框A"

:visible="show"

width="80%"

@close="handleCloseElementDialog"

>

<!--

需要监听close事件

不能使用 v-on="$listeners"进行事件透传,

因为el-dialog的close事件无参数,会把show设置为undefined,

父组件的变量即会被设置为undefined

可以使用自定义事件进行一次包装

-->

<div>

<div>{{ otherProp }}</div>

<el-button @click="handleCloseElementDialog">关闭弹框</el-button>

</div>

</el-dialog>

</template>

<script>

export default {

name: 'DialogA',

model: {

prop: 'show',

event: 'my-close'

},

props: {

show: {

type: Boolean,

default: false

},

// 其他props

otherProp: {

type: String,

default: 'otherProp'

}

},

methods: {

handleCloseElementDialog() {

this.$emit('my-close', false)

}

}

}

</script>

以上是 【前端技术】使用v-model封装el-dialog组件实现双向绑定 的全部内容, 来源链接: www.h5w3.com/147729.html

回到顶部