vue3 在组件上使用v-model
首先要明白的是v-model在input 、checked、 radio、select等标签上表示的意思v-model在input中表示value和input事件,如果我们把他么拆分开 ,那么就能实现组件的v-model很简单,总共算分为三步吧第一步,在组件内部的input的标签上使用:value绑定props中的值,这一点要明白 绑定的是父组件传过来的值HTML<input type="t
·
首先要明白的是 v-model在input 、checked 、 radio 、select等标签上表示的意思
v-model 在input中表示 value 和input事件 ,如果我们把他么拆分开 ,那么就能实现组件的v-model
很简单 ,总共算分为三步吧
第一步,在组件内部的input的标签上 使用:value绑定props中的值,这一点要明白 绑定的是父组件传过来的值
HTML
<input type="text" :value="toValue" @input="inputHandler" />
<select :value="selectValue" @change="selectChange">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
JS
props: ["name", "toValue",'selectValue'],
第二步 @input事件自定义,往外暴露一个事件 ,这个事件名是有说法的,规定必须是 update:value绑定的变量名,必须为这种格式,使用e.target.value往外传输当前input框上的值
const inputHandler=(e)=>{
console.log(e.target.value)
context.emit('update:toValue',e.target.value)
}
const selectChange=(e)=>{
context.emit('update:selectValue',e.target.value)
}
第三步 父组件调用组件,在组件上使用v-model:子组件value绑定的变量名=“父组件内部的变量”
<Child
:name="myObj"
@toPatent="toPatent"
v-model:toValue="toValue1"
v-model:selectValue="toValue1"
></Child>
总结:
子组件必须接受父组件传过来的值
子组件必须使用update:变量名 往外暴露一个事件
父组件中调用必须为v-model:名字来调用
仅记录平常学习
更多推荐
已为社区贡献10条内容
所有评论(0)