1. 原則
コンポーネントでの使用は、v-modelフォーム タグでの使用と似ており、両方とも 1 つです语法糖。
これは、バインドされた値をmodelValueを通じてコンポーネントに渡すことと同等でありprops、コンポーネント内の値が変更された後、イベントをトリガーしてデータの双方向バインドを実現することupdateによって値が更新されます。modelValue
二つ、悟る
親コンポーネント:
<template>
<div>
<children v-model="msg"></children>
<!-- 等效于下方写法 -->
<children :modelValue="msg" @update:modelValue="msg = $event"></children>
</div>
</template>
<script>
export default {
data() {
return {
msg: 123,
};
},
};
</script>
サブアセンブリ:
<template>
<div>
<el-input v-model="inputValue"></el-input>
</div>
</template>
<script>
export default {
props: {
// 接收父组件传来的值
modelValue: String,
},
emits: ["update:modelValue"],
data() {
return {
};
},
computed: {
inputValue: {
set(newValue) {
// 发送事件改变父组件的值
this.$emit("update:modelValue", newValue);
},
get() {
return this.modelValue;
},
},
},
};
</script>
3、ピットに足を踏み入れる
ネットの書き方に従って書いてみたところ、入力ボックスに値が無く、入力できないことが分かりました。これは、値が親コンポーネントから子コンポーネントに渡されず、子コンポーネントが対応するイベントをトリガーしないことを意味します。vue の公式ドキュメント
を参照すると、次の手順が見つかりました。
ドキュメントに記載されているのは、v-modelのデフォルト値は、私が書いた とイベントではなく、valueプロパティとイベントであるということです。また、デフォルト値を上書きするオプションも提供します。inputmodelValueupdatemodel
- デフォルト値を変更する（方法1）
export default {
props: {
modelValue: String,
},
emits: ["update:modelValue"],
// 在子组件中添加 model 选项
model: {
prop: 'modelValue', // 绑定的 prop 名
event: 'update:modelValue' // 通知父组件更新的事件名
},
};
- プロップとイベント名の変更 (方法 2)
export default {
props: {
// 改变prop
value: String,
},
emits: ["input"],
data() {
return {
};
},
computed: {
inputValue: {
set(newValue) {
// 改变事件名
this.$emit("input", newValue);
},
get() {
return this.value;
},
},
},
};