【VUE3 之 v-model 绑定子组件的 新特性讲解 & 使用】绑定单个&&多个 v-model、自定义修饰符

简单的基本内容：本章讲解的为：使用方式4 `components`

• 使用限制：

1. `<input>`
2. `<select>`
3. `<textarea>`
4. `components`

• 修饰符:

1. `.lazy` - 监听 `change` 而不是 `input` 事件
2. `.number` - 输入字符串转为有效的数字
3. `.trim` - 输入首尾空格过滤  

本章内容：v-model绑定子组件的默认方式、绑定多个v-model、自定义v-model修饰符

例子1：

对子组件标签直接使用 v-model 时

子组件 props 默认值为 'modelValue'

emits 默认值为 'update:modelValue'

// 父组件
<template>
  <modelChild v-model="bookTitle" />
</template>


// 子组件
<template>
  <input :value="modelValue" @input="changeData"/>
</template>
<script>
export default {
  props:['modelValue'],
  emits:['update:modelValue'],
  methods:{
    changeData(val){
      this.$emit('update:modelValue', val)
    },
  }
}
</script>

备注：为了遵从组件通信间的单向数据流的规范，禁止对props进行双向绑定了。

（vloar低版本且不使用defineComponent的情况下，对props双向绑定不会报错，但为了规范，官方也禁止对props进行双向绑定！）

例子2：高阶用法

讲解知识点:`v-model`参数、多个`v-model`绑定、自定义`v-model`修饰符

1. 自定义修饰符：对于带参数的 v-model 绑定，生成的 prop 名称将为 arg + "Modifiers"，然后`[参数名]Modifiers.[修饰符名]`使用
2. `props`的内容：`[参数名]`，自定义修饰符的为`[参数名]Modifiers`
3. `emits`的内容：`update:[参数名]`

父组件：

<template>
  <vModelText v-model:text="data1" v-model:num.numReg="numData">
  </vModelText>
</template>
<script>
export default {
  data(){
    return{
      data1:"data1的数据",
      numData: 0,
    }
  }
}
</script>

子组件：

<template>
  <el-input :modelValue="text" @input="changeText" placeholder="vModelText-Please input" style='width:300px' />
  <el-input :modelValue="myNum" @blur="numChange" placeholder="只能输入数字哦" style='width:150px' />
</template>
<script>
export default {
  props:['text','num','numModifiers'],
  emits:['update:text','update:num'],
  data(){
    return{
      myNum:'',
      focusData:'组件实例指令'
    }
  },
  methods:{
    numChange(event){
      let val = event?.target.value
      if (this.numModifiers) { 
      //如果v-model 没加.xx 自定义修饰符，则arg+Modifiers 此处就是undefined，所以要先判断这个
        if (this.numModifiers.numReg&&!Number(val)) {
          // 当父组件引用该组件，并且v-model:title加了.capitalize修饰符的时候，就会执行该修饰符定义的功能
          // 执行.capitalize的相关功能
          // titleModifiers：这个由title+Modifiers组合而成，也就是.capitalize绑定在:title上的
          console.error('请填写数字哦！');
          val=''
        }
      }
      this.myNum = val
      this.$emit('update:num',val)
    },
    changeText(val){
      this.$emit('update:text',val)
      console.log(val);
    },
  }
}
</script>

 其他vue3 选项式api、组合式api、全局/应用api学习经验分享

vue3 学习资料vue3学习资料记录，经验交流、分享https://oumae-kumiko.github.io/vue3.cn.community/