Vue.jsではinputタグに対してv-modelを使用することが多いかと思いますが、2系と３系では値を受け取るprops名とemitのイベントの記述が異なるので注意が必要です。
Vue.js2系(composition-api)
Vue.js2系でinputタグをコンポーネント化してpropsで値を渡すときの例を以下に記載します。
Vue.js2系ではv-modelの値を特に指定しなければvalueという値がpropsで渡されます。
<template>
<BaseInput
type="email"
name="email"
v-model="email"
/>
</template><template>
<input
:type="type"
:name="name"
:value="value"
@input="updateValue"
/>
</template>
<script>
export default {
props: {
value: { type: String, required: true }, //v-modelで渡される値が入る
type: { type: String, required: true },
name: { type: String, required: true },
},
emits:['input'],
setup(_, context) {
const updateValue = (e) => {
context.emit("input", e.target.value);
};
return {
updateValue
};
}
};
</script>Vue.js3系(composition-api <script setup>)
inputタグは今までと一緒です。
注意すべきはv-modelのプロパティとemitのイベントの記述です。
プロパティ: value -> modelValue
イベント: input -> update:modelValue
特にエラーが出るわけではなくただただ値が返ってこないのでなかなか気が付きませんでした。。。
どうしてこうなったんだ。。。
<template>
<BaseInput
type="email"
name="email"
v-model="email"
/>
</template><template>
<input
:type="type"
:name="name"
:value="modelValue"
@input="updateValue"
/>
</template>
<script setup>
const props = defineProps({
modelValue: { type: String, required: true }, //v-modelで渡される値が入る
type: { type: String, required: true },
name: { type: String, required: true },
});
const emit = defineEmits();
const updateValue = (e) => {
emit("update:modelValue", e.target.value); //inputでは値が返らない
};
</script>関連記事
