v-model指令随记

开发项目的时候会使用element-ui的dialog组件，也会自己封装弹出框组件去完成项目需求，但总感觉自己的代码不够优雅，那么我们就根据el-dialog的组件用法去剖析他的实现方式，然后完善自己的自定义弹出框组件

自己写的

<!--components-->
<template>
    <div class="customDialog">
        <div class="overlay"></div>
        <div class="close" @click="$emit('hideDialog', false)"></div>
        <div class="dialogContent">
            <slot></slot>
        </div>
    </div>
</template>

<!--父组件-->
<template>
    <CustomDialog v-if="showDialog" @hideDialog="showDialog = false"></CustomDialog>
</template>

element-ui

<template>
    <el-dialog v-model="showDialog"></el-dialog>
</template>

element只用了v-model就实现了开关控制，而自己写的组件还要绑定自定义事件。观察发现问题可能出在v-model这个属性上，那么先去官网找找

// 摘自vue官网

// 自定义事件可以用于开发支持 v-model的自定义表单组件。回忆一下 v-model 在原生元素上的用法：
<input v-model="searchText" />

// 上面的代码其实等价于下面这段 (编译器会对 v-model 进行展开)：
<input
  :value="searchText"
  @input="searchText = $event.target.value"
/>

完整demo代码如下

<CustomInput v-model="searchText" />


<!--conponent-->
<script>
export default {
  props: ['modelValue'],
  emits: ['update:modelValue']
}
</script>

<template>
  <input
    :value="modelValue"
    @input="$emit('update:modelValue', $event.target.value)"
  />
</template>

官网demo给我们演示了props数据的双向绑定， 那么改变思路，我们从内部调用v-model附带的自定义事件，也就实现了子组件对父组件数据的修改。然后就顺利完成项目需求

代码如下

<customScale v-model="show"></customScale>

<!--conponent-->
<template>
    <div class="customDialog">
        <div class="overlay"></div>
        <div class="close" @click="$emit('update:modelValue', false)"></div>
        <div class="dialogContent">
            <slot></slot>
        </div>
    </div>
</template>

平时的业务中遇到的父子组件双向数据绑定props的需求较少，这里暂不做更多探索，只实现简单的数据双向绑定 知道如果再遇到v-model 知道内部的实现原理就可以了。