2-4-vue框架-组件-vue-component组件化开发-组件v-model（子传父的另外一种方式）
v-model
可以在组件上使用以实现双向绑定。
原生元素使用v-model
首先让我们回忆一下 v-model 在原生元素上的用法：
这个v-model 在表单中使用，比如输入框，可以获取我们输入的信息，
<input v-model="searchText" />
在代码背后，模板编译器会对 v-model 进行更冗长的等价展开。因此上面的代码其实等价于下面这段：
<input
:value="searchText"
@input="searchText = $event.target.value"
/>
组件使用v-model
我们想要的效果就是，在组件A中输入数据，然后在组件B中实时获取输入的数据，并且展示出来，
改如何做呢?
这是经常会遇到的场景，
通过监听器也可以实现，但是现在不使用这个方式，
而当使用在一个组件上时，v-model 会被展开为如下的形式：
<CustomInput
:modelValue="searchText"
@update:modelValue="newValue => searchText = newValue"
/>
要让这个例子实际工作起来，CustomInput组件内部需要做两件事：
将内部原生 input元素的 value attribute 绑定到 modelValue prop
当原生的 input 事件触发时，触发一个携带了新值的 update:modelValue 自定义事件
组件内实现 v-model 的方式一
定义一个v-model的子组件
<template>
<input
:value="modelValue"
@input="$emit('update:modelValue', $event.target.value)"
/>
</template>
<script>
export default {
props: ['modelValue'],
emits: ['update:modelValue']
}
</script>
使用一个含有v-model的父组件
<template>
<CustomInput v-model="message" /> {{ message }}
</template>
<script>
import CustomInput from './components/demo1.vue'
export default {
components: { CustomInput },
data() {
return {
message: 'hello'
}
}
}
</script>
组件内实现 v-model 的方式二
使用一个可写的，同时具有 getter 和 setter 的 computed 属性。get 方法需返回 modelValue prop，而 set 方法需触发相应的事件
<!-- CustomInput.vue -->
<script>
export default {
props: ['modelValue'],
emits: ['update:modelValue'],
computed: {
value: {
get() {
return this.modelValue
},
set(value) {
this.$emit('update:modelValue', value)
}
}
}
}
</script>
<template>
<input v-model="value" />
</template>
- 父组件写法不变，
改变v-model的参数
默认情况下，v-model 在组件上都是使用 modelValue 作为 prop，并以 update:modelValue 作为对应的事件。我们可以通过给 v-model 指定一个参数来更改这些名字：
对应的子组件
<template>
<input
:value="title"
@input="$emit('update:title', $event.target.value)"
/>
</template>
<script>
export default {
props: ['title'],
emits: ['update:title']
}
</script>
对应的父组件
<template>
<CustomInput v-model:title="message" /> {{ message }}
</template>
<script>
import CustomInput from './components/demo1.vue'
export default {
components: { CustomInput },
data() {
return {
message: 'hello'
}
}
}
</script>
多个v-model的绑定
利用刚才在 v-model 参数小节中学到的指定参数与事件名的技巧，我们可以在单个组件实例上创建多个 v-model 双向绑定。
组件上的每一个 v-model 都会同步不同的 prop，而无需额外的选项：
<UserName
v-model:first-name="first"
v-model:last-name="last"
/>
<script>
export default {
props: {
firstName: String,
lastName: String
},
emits: ['update:firstName', 'update:lastName']
}
</script>
<template>
<input
type="text"
:value="firstName"
@input="$emit('update:firstName', $event.target.value)"
/>
<input
type="text"
:value="lastName"
@input="$emit('update:lastName', $event.target.value)"
/>
</template>
处理 v-model 修饰符
在学习输入绑定时，我们知道了 v-model 有一些内置的修饰符，例如 .trim，.number 和 .lazy。在某些场景下，你可能想要一个自定义组件的 v-model 支持自定义的修饰符。
我们来创建一个自定义的修饰符 capitalize，它会自动将 v-model 绑定输入的字符串值第一个字母转为大写：
父组件
<MyComponent v-model.capitalize="myText" />
子组件
console.log(this.modelModifiers): { capitalize: true }
注意这里组件的 modelModifiers prop 包含了 capitalize 且其值为 true，因为它在模板中的 v-model 绑定 v-model.capitalize="myText" 上被使用了。
有了这个 prop，我们就可以检查 modelModifiers 对象的键，并编写一个处理函数来改变抛出的值。在下面的代码里，我们就是在每次 <input /> 元素触发 input 事件时将值的首字母大写：
<script>
export default {
props: {
modelValue: String,
modelModifiers: {
default: () => ({})
}
},
emits: ['update:modelValue'],
methods: {
emitValue(e) {
let value = e.target.value
if (this.modelModifiers.capitalize) {
value = value.charAt(0).toUpperCase() + value.slice(1)
}
this.$emit('update:modelValue', value)
}
}
}
</script>
<template>
<input type="text" :value="modelValue" @input="emitValue" />
</template>
对于又有参数又有修饰符的 v-model 绑定，生成的 prop 名将是 arg + "Modifiers"。举例来说：
<MyComponent v-model:title.capitalize="myText">
相应的声明应该是：
export default {
props: ['title', 'titleModifiers'],
emits: ['update:title'],
created() {
console.log(this.titleModifiers) // { capitalize: true }
}
}
