Vue3 - 组件的v-model

组件v-model

基本用法

• 数据双向绑定

• 他的原理在于传递了一个名为modelValue的属性以及注册了一个名为@update:modelValue自定义事件，在子组件中需要在defineProps接收modelValue属性以及声明defineEmits。

• 如果不做任何操作则默认绑定的就是modelValue属性和注册@update:modelValue事件，但也可以进行修改，可以通过v-model:title去更改名字

• 在代码中的体现

• // 父组件
  <template>
    <div>
      <!-- <VModel v-model="title"></VModel> -->
        
      <!-- 修改绑定的默认名称 -->
      <VModel v-model:title="title"></VModel>
    </div>
  </template>
   
  <script setup>
  import { ref } from 'vue'
  import VModel from './components/zujianup/02-组件v-model.vue'
  
  const title = ref('爱你孤生走暗巷')
  </script>
  
  
  
  // 子组件
  <template>
    <div>
      <!-- <h1>子组件传过来的值为：{
       
       { prop.modelValue }}</h1> -->
        
      <h1>子组件传过来的值为：{
       
       { prop.title }}</h1>
      <button @click="changeTitle">更改父组件传过来的值</button>
    </div>
  </template>
   
  <script setup>
  // const prop = defineProps(['modelValue'])
  // const emit = defineEmits(['update:modelValue'])
  
  const prop = defineProps(['title'])
  const emit = defineEmits(['update:title'])
  
  const changeTitle = () => {
    emit('update:modelValue', '爱你不跪的模样')
  }
  </script>
  

与vue2中v-model的区别

• vue2中的v-moel在组件上只能绑定一次，绑定多个需要使用.sync语法糖
• 而vue3中的v-model更加类似于.sync，并且可以修改名字，因此它可以在一个组件标签上绑定多个，多个绑定的v-model通过修改名字加以区分

自定义v-model的修饰符

• v-model有一些自定义事件，但某些场景下需要自定义一些修饰符

• 例如首字母大写

• // 子组件
  <script setup>
  const props = defineProps({
    modelValue: String,
    modelModifiers: { default: () => ({}) } // 在defineProps通过modelModifiers声明
  })
  
  const emit = defineEmits(['update:modelValue'])
  
  function emitValue(e) {
    let value = e.target.value
    // 如果用了这个自定义修饰符，则执行相应的逻辑
    if (props.modelModifiers.capitalize) {
      // 首字母大写的逻辑
      value = value.charAt(0).toUpperCase() + value.slice(1)
    }
    emit('update:modelValue', value)
  }
  </script>
  
  <template>
    <input type="text" :value="modelValue" @input="emitValue" />
  </template>
  
  
  // 父组件
  <template>
    <div>
      <!-- v-model后面跟自定义修饰符 -->
      <Component3 v-model.capitalize="myText" />
    </div>
  </template>
   
  <script setup>
  import { ref } from 'vue'
  import Component3 from './components/zujianup/Component3.vue'
  
  const myText = ref('abcd')
  </script>