【Vue】利用v-model特性封装Dialog弹窗或可编辑窗口。

news2025/7/3 21:37:27

简单介绍，Vue里面的v-model就是vue的双向绑定的指令，能将页面上控件输入的值同步更新到相关绑定的data属性，也会在更新data绑定属性时候，更新页面上输入控件的值。

v-model封装弹窗

父组件

<manage-dialog v-model="isVisible"/>
<div @click="isVisible=true"> 点我弹窗</div>

export default {
components: {manageDialog},data(){return{isVisible:false}
 }

}

子组件

 <el-dialog:visible.sync="isVisible":before-close="handleClose" ><script> export default {model: {prop: 'isVisible',event: 'close'//这个要是close},props: {isVisible: {type: Boolean,default: false},},methods: {handleClose() {this.$emit('close', false)}}

} </script>

小结：

这个比较简单，需要注意的是子组件里的model允许一个自定义组件在使用 v-model 时定制 prop 和 event。官方文档里有写，一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件，但是像单选框、复选框等类型的输入控件可能会将 value 特性用于不同的目的。model 选项可以用来避免这样的冲突，所以上面的子组件里，我们用balabala来替换掉了原本的input事件，所以在$emit的时候，里面的事件名应为close，否则默认为input.

其实还有第二种方法，是需要使用.sync修饰符。子组件通过this.$emit(“update:show”,false);来操作的。这里就不过多介绍。

v-model封装可编辑表单

先看官网介绍=> 自定义事件可以用于开发支持 v-model 的自定义表单组件。回忆一下 v-model 在原生元素上的用法：

<input v-model="searchText" />

上面的代码其实等价于下面这段 (编译器会对 v-model 进行展开)：

<input:value="searchText"@input="searchText = $event.target.value"
/>

父组件

<template><home-child v-model="vModelData"></home-child>
</template>

<script> import HomeChild from './child/HomeChild.vue'
export default {name: 'Home',components: {HomeChild},data () {return {vModelData: 'hello v-model'}}
} </script>

子组件

<template><div class="box"><span>{{ value }}</span><button @click="testVModel">测试v-model</button></div>
</template>

<script> export default {name: 'HomeChild',props: {value: {type: String,default: ''}},methods: {testVModel () {this.$emit('input', '我是子组件')}}
} </script>

用 model 选项的组件使用 v-model

父组件

<template><div class="home"><h3>输入的实时内容：{{ myValue }}</h3><custom-model v-model="myValue"></custom-model></div>
</template>
<script> import CustomModel from './CustomModel'
export default {name: 'Home',components: {CustomModel,},data () {return {myValue: ''}},
} </script>
复制代码

子组件

<template><!-- 自定义组件中使用v-mode指令 --><input type="search" @input="changeInput" data-myValue="">
</template>

<script> export default {name: 'CustomModel',// 当我们使用model的默认值的时候value作prop，input作event时，可以省略不写model。model: {prop: 'myValue', // 默认是valueevent: 'myInput', // 默认是input},props: {// 接收string和number类型的值，// 注意不能是写成字符串["String","Number"],因为此时它们是构造器，是全局变量myValue: [String, Number],},methods: {changeInput ($event) {// 向上派发myInput事件，这样model监听myInput才有意义：当输入字符时触发input事件，// 进而派发触发自定义的myInput事件，然后model监听myInput，就实现了数据绑定this.$emit('myInput', $event.target.value)},}
} </script>