什么是v-model

废话：v-model是v-bind与v-on的结合，v-bind绑定value值,v-on给当前的元素绑定事件。

初识Vue3.x的v-model

大家都知道vue2.x的v-mdoel是如何使用的，我在学习vue3.0过程使用了 element plus 的UI框架，在对话框


<template>
<el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button>

<el-dialog
  title="提示"
  v-model="dialogVisible"
  width="30%"
  :before-close="handleClose">
  <span>这是一段信息</span>
  <template #footer>
    <span class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
    </span>
  </template>
</el-dialog>
</template>

<script>
  export default {
    data() {
      return {
        dialogVisible: false
      };
    },
    methods: {
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      }
    }
  };
</script>

<style>

</style>
复制代码

在此处绑定dialogVisible出改成了v-model，在element ui中是使用到了:visible.sync="dialogVisible"。

正篇

v-model常见的使用

毋庸置疑vue3.x的v-model还是保留着vue2.x的使用方式。

v-model与.sync修饰符

在此处是使用的v-bind的修饰符.sync来进行父子间props的同步。
vue2.x：父

<template>
  <div class="parent">
    <son :sonProps.sync='sonProps'></son>
  </div>
</template>

<script>
import son from './son.vue'
export default {
  components: {
    son
  },
  data() {
    return {
      sonProps: 'v-'
    }
  },
}
</script>
复制代码

vue2.x的子：

<template>
  <div class="son">
    {{sonData}}
    <button @click="chang">改变sonProps</button>
  </div>
</template>

<script>
export default {
  props: {
    sonProps: {
      type: String
    }
  },
  computed: {
    sonData: {
      get() {
        return this.sonProps
      },
      set(val) {
        this.$emit('update:sonProps', val)
      }
    }
  },
  methods: {
    chang() {
      this.sonData = 'model'
    }
  },
}
</script>
复制代码

vue3.x直接使用v-model时子的props是取名为modelvalue来获得父组件传来的值。

父:
<son v-model='sonProps'></son>
子:
props: {modelValue: String}
复制代码

在开发中我们是不可能只使用传值一个所以使用v-model:propName,来进行多个的传值，因此v-model就新增了同组件可以进行多次的v-model数据双向绑定。

<son v-model:sonProps='sonProps'></son>
复制代码

完整代码:

父： 
<template>
  <div>
    <son v-model:sonProps="sonProps"></son>
  </div>
</template>

<script lang='ts'>

import { ref } from 'vue'
import son from './son.vue';

export default {
  components: {
    son
  },
  setup() {
    const sonProps = ref('v-')
    return {
      sonProps
    }
  },
}
</script>
子： 
<template>
    <div>{{ sonProps }}</div>
    <button @click="change">改变Props</button>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'
export default defineComponent({
    props: { sonProps: String },
    emits:['update:sonProps'],
    setup(props, context) {
        const change = () => {
            context.emit('update:sonProps', 'model')
        }
        return {
            change
        }
    }
})
</script>
复制代码

此处子组件尽量把emits选项给写上，有机会再说。

v-mdoel自定义修饰符

内置修饰符

v-model 有内置修饰符.trim、.number 和 .lazy。

.trim：自动的去掉首尾的空格。
.number：只允许输出数字，还有把数据的类型由string转成了number。
.lazy：当失去焦点的进行赋值。

自定义修饰符

vue3.x的v-model亮点就是可以自定义指令。这样就扩展了v-model用处，我们在开发中有时候会写一些自定义的指令，当我们功能需求比较简单时大可不必写自定义指令费时费事了，例如字符串首字母大写、去保留小数点后两位等等。

父：
<template>
  <div>
    <son v-model:sonProps.modifiers="sonProps"></son>
  </div>
</template>

<script lang='ts'>

import { ref } from 'vue'
import son from './son.vue';

export default {
  components: {
    son
  },
  setup() {
    const sonProps = ref('v-')
    return {
      sonProps
    }
  },
}
</script>

子： 

<template>
    <div>{{ sonProps }}</div>
    <button @click="change">改变Props</button>
</template>
<script lang="ts">
import { defineComponent, ref, onMounted } from 'vue'
export default defineComponent({
    props: {
        sonProps: String,
        sonPropsModifiers: {
            type: Object
        }
    },
    emits: ['update:sonProps'],
    setup(props, context) {
        onMounted(() => {
            //在这里就可以对数据进行操作了
            if(props.sonPropsModifiers.modifiers) {
                context.emit('update:sonProps', 'sonPropsModifiers')
            }
        })
        const change = () => {
            context.emit('update:sonProps', 'model')
        }
        return {
            change
        }
    }
})
</script>
复制代码