老师 为什么不行
来源：1-8 组件间双向绑定高级内容（选学）
母鸡阿
2021-06-23 13:02:24
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>组件双向绑定高级内容</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
const app = Vue.createApp({
data(){
return{
count:1,
str:'aaa'
}
},
//v-model: :是重命名，原本子组件接收参数是用modelValue，重命名后用重命名的名字接收
template: `<div><counter v-model:count_="count" v-model.uppercase:str_="str" />`,
});
app.component('counter',{
props:{
'count_' : Number,
'str_': String,
'modelModifiers' : {
default: () => ({})
}
},
template:`
<div @click="countAdd">{{count_}}</div>
<div @click="str">{{str_}}</div>
`,
methods:{
countAdd(){
this.$emit('update:count_',this.count_+2)
},
str(){
let newStr = this.str_ + 'b';
newStr = newStr.toUpperCase();
if(this.modelModifiers.uppercase){
this.$emit('update:str_',newStr);
}
}
}
})
const vm = app.mount('#root');
</script>
</html>
1回答
-
同学你好，修饰符在名字的后面写
在props里面，要定义成 名字+Modifiers
str方法中也要修改一下：
祝学习愉快~
0
相似问题