v-model修饰符方式怎么将modelValue修改一个别名？
来源：1-8 组件间双向绑定高级内容（选学）
weixin_慕勒4195760
2021-01-04 20:16:29
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- vue 3.x最新版 -->
<!--<script src="https://unpkg.com/vue@next"></script>-->
<!--指定版本-->
<!--<script src="https://unpkg.com/vue@3.0.5/dist/vue.global.js"></script>-->
<!--使用本地的-->
<script src="js/vue.global-3.0.5.js"></script>
</head>
<body>
<div id="root"></div>
<script>
const app = Vue.createApp({
data() {
return {content: "a"}
},
// .uppercase2 是v-model的修饰符，名字任意定
// 但是这有一个问题，使用了修饰符，再起别名就无效了？ v-model.uppercase2:app
template: `
<demo v-model.uppercase2="content"></demo>`
})
app.component('demo', {
props: {
'modelValue': String,
'modelModifiers': {
default: () => ({})
}
},
methods: {
addOne() {
// 让值+一个字符串b
let newValue = this.modelValue + 'b';
// 修饰符判断，如果有修饰符，那么将字母转为大写
if (this.modelModifiers.uppercase2) {
newValue = newValue.toUpperCase()
}
this.$emit("update:modelValue", newValue);
}
},
template: `<p @click="addOne">{{ modelValue }}</p>`
})
const vm = app.mount('#root');
</script>
</body>
</html>
问题描述：
上面的代码运行没问题，但是我想给modelValue起一个别名，父组件这样修改了以后：
<demo v-model.uppercase2:app="content"></demo>`
子组件将所有的modelValue也修改成了app，但是页面显示空白，也没有报错，
请问老师这个该如何处理呢？
写回答
2回答
-
同学你好，可以如下这样写：
其中test是自定义的名字，vue会对应生成一个“自定义名字+Modifiers”（testModifiers）的prop来接收修饰符。
同学试一下。
祝学习愉快！
0 -
weixin_慕勒4195760
提问者
2021-01-04
我用的本地的vue，老师可以把在线版本的vue注释打开
别用网站的复制功能，直接用鼠标复制，第30行不知道有个什么字符，删除一下，代码就正常了
0
相似问题
modelValue
回答 1
老师 为什么不行
回答 1