v-model:title的實現(xiàn)方式
<!--
* @Description: 驗證Emits 組件選項
-->
<template>
<SonCom
v-model:title="bookTitle"
></SonCom>
</template>
<script>
import SonCom from "./SonCom .vue";
export default {
name: "EmitsTest",
components: { SonCom },
data() {
return {
bookTitle: "非暴力溝通",
};
},
watch: {
bookTitle(val, old) {
console.log(val, old);
}
},
};
</script>
<!--
* @FilePath: \EmitsTest\SonCom.vue
-->
<template>
<input
type="text"
:value="title"
@input="$emit('update:title', $event.target.value)"
/>
</template>
<script>
export default {
name: "SonCom",
props: {
title: String
},
emits: ["update:title"],
};
</script>
v-model自定義修飾符张惹，v-model.capitalize="myText"
<template>
<ModelCom
v-model:title="bookTitle"
v-model:page="page"
v-model.capitalize="myText"
></ModelCom>
</template>
<script>
import ModelCom from "./ModelCom.vue";
export default {
name: "EmitsTest",
components: { ModelCom },
data() {
return {
bookTitle: "非暴力溝通",
page: 20,
myText: "good",
};
},
watch: {
bookTitle(val, old) {
console.log(val, old);
},
page(val, old) {
console.log(val, old);
},
myText(val, old) {
console.log(val, old);
},
},
};
</script>
