1.自定义修饰符
const app = Vue.createApp({
data() {
return {
num: "a",
};
},
template: `
<div>
<counter v-model.uppercase="num"/>
</div>`,
});
// 名字必须叫做modelValue 要在自定义用v-model的话
app.component("counter", {
props: {
modelValue: String,
//通过 modelModifiers接收传过来的修饰符
modelModifiers: {
//不传内容时默认给一个空对象
default: () => ({}),
},
},
mounted() {
console.log(this.modelModifiers);
},
methods: {
add() {
//每次给字符串中加一个b
let newVal = this.modelValue + "b";
//如果有uppercase这个修饰符
if (this.modelModifiers.uppercase) {
newVal = newVal.toUpperCase();
}
// 固定的名字 update:modelValue
this.$emit("update:modelValue", newVal);
},
},
template: `
<div @click="add">{{modelValue}}</div>
`,
});
const vm = app.mount("#root");