Vue3 - コンポーネントの v モデル

コンポーネント v モデル

基本的な使い方

• データ双方向バインディング

• 彼の原則は、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 はコンポーネント上で 1 回のみバインドでき、複数のバインディングには .sync 構文シュガーを使用する必要があります。
• vue3 の v-model は .sync に似ており、名前を変更できるため、コンポーネント タグに複数をバインドでき、名前を変更することで複数のバインドされた v-model を区別できます。

カスタム v モデルのモディファイア

• 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>