重学vue之父子组件间的双向绑定,附详细代码
程序员文章站
2022-03-02 12:23:51
说明绑定一个v-model父组件中 data() { return { parentData: 1 } },子组件中
{{modelValue}}
...说明
绑定一个v-model
父组件中
<template>
<div>
<child v-model="parentData"/>
</div>
</template>
data() {
return { parentData: 1 }
},
子组件中
<div @click="handleClick">{{modelValue}}</div>
//一定只能这样写,modelValue就是parentData
props: ['modelValue'],
methods: {
handleClick() {
//事件名只能是update:modelValue
this.$emit('update:modelValue', this.modelValue);
}
},
绑定多个v-model
- 现在可以更改接收的名称了
父组件中
<template>
<div>
<!-- 指定传递给子组件的变量名字为newName -->
<child v-model:newName="parentData"/>
</div>
</template>
子组件中
<div @click="handleClick">{{newName}}</div>
//现在newName就是parentData
props: ['newName'],
methods: {
handleClick() {
//事件名也使用update:newName
this.$emit('update:newName', this.newName);
}
},
为v-model添加自定义修饰符
父组件中
<template>
<div>
<child v-model.uppercase="parentData"/>
</div>
</template>
子组件中
<div @click="handleClick">{{modelValue}}</div>
props: {
'modelValue': String,
'modelModifiers': {
default: ()=> ({})
}
},
methods: {
handleClick() {
let newValue = this.modelValue + 'b';
//判断是否有这个东西
if(this.modelModifiers.uppercase) {
newValue = newValue.toUpperCase();
}
//注意这个子组件发送给父组件的数据哟
this.$emit('update:modelValue', newValue);
},
}
本文地址:https://blog.csdn.net/qq_45549336/article/details/110990794