【VUE3 之 v-model 绑定子组件的 新特性讲解 & 使用】绑定单个&&多个 v-model、自定义修饰符
本章内容:v-model绑定子组件的默认方式、绑定多个v-model、自定义v-model修饰符。讲解知识点:`v-model`参数、多个`v-model`绑定、自定义`v-model`修饰符自定义修饰符:对于带参数的 v-model 绑定,生成的 prop 名称将为 arg + "Modifiers",然后`[参数名]Modifiers.[修饰符名]`使用`props`的内容:`[参数名]`,自
·
简单的基本内容:本章讲解的为:使用方式4 `components`
- 使用限制:
- `<input>`
- `<select>`
- `<textarea>`
- `components`
- 修饰符:
- `.lazy` - 监听 `change` 而不是 `input` 事件
- `.number` - 输入字符串转为有效的数字
- `.trim` - 输入首尾空格过滤
本章内容:v-model绑定子组件的默认方式、绑定多个v-model、自定义v-model修饰符
例子1:
对子组件标签直接使用 v-model 时
子组件 props 默认值为 'modelValue'
emits 默认值为 'update:modelValue'
// 父组件
<template>
<modelChild v-model="bookTitle" />
</template>
// 子组件
<template>
<input :value="modelValue" @input="changeData"/>
</template>
<script>
export default {
props:['modelValue'],
emits:['update:modelValue'],
methods:{
changeData(val){
this.$emit('update:modelValue', val)
},
}
}
</script>
备注:为了遵从组件通信间的单向数据流的规范,禁止对props进行双向绑定了。
(vloar低版本且不使用defineComponent的情况下,对props双向绑定不会报错,但为了规范,官方也禁止对props进行双向绑定!)
例子2:高阶用法
讲解知识点:`v-model`参数、多个`v-model`绑定、自定义`v-model`修饰符
- 自定义修饰符:对于带参数的 v-model 绑定,生成的 prop 名称将为 arg + "Modifiers",然后`[参数名]Modifiers.[修饰符名]`使用
- `props`的内容:`[参数名]`,自定义修饰符的为`[参数名]Modifiers`
- `emits`的内容:`update:[参数名]`
父组件:
<template>
<vModelText v-model:text="data1" v-model:num.numReg="numData">
</vModelText>
</template>
<script>
export default {
data(){
return{
data1:"data1的数据",
numData: 0,
}
}
}
</script>
子组件:
<template>
<el-input :modelValue="text" @input="changeText" placeholder="vModelText-Please input" style='width:300px' />
<el-input :modelValue="myNum" @blur="numChange" placeholder="只能输入数字哦" style='width:150px' />
</template>
<script>
export default {
props:['text','num','numModifiers'],
emits:['update:text','update:num'],
data(){
return{
myNum:'',
focusData:'组件实例指令'
}
},
methods:{
numChange(event){
let val = event?.target.value
if (this.numModifiers) {
//如果v-model 没加.xx 自定义修饰符,则arg+Modifiers 此处就是undefined,所以要先判断这个
if (this.numModifiers.numReg&&!Number(val)) {
// 当父组件引用该组件,并且v-model:title加了.capitalize修饰符的时候,就会执行该修饰符定义的功能
// 执行.capitalize的相关功能
// titleModifiers:这个由title+Modifiers组合而成,也就是.capitalize绑定在:title上的
console.error('请填写数字哦!');
val=''
}
}
this.myNum = val
this.$emit('update:num',val)
},
changeText(val){
this.$emit('update:text',val)
console.log(val);
},
}
}
</script>
其他vue3 选项式api、组合式api、全局/应用api学习经验分享
vue3 学习资料vue3学习资料记录,经验交流、分享https://oumae-kumiko.github.io/vue3.cn.community/
更多推荐
已为社区贡献10条内容
所有评论(0)