v-model 参数
默认情况下，组件上的 v-model 使用 title作为 prop 和 update:title作为事件。我们可以通过向 v-model 传递参数来修改这些名称：
zizhi是我自己创建的组件
<zizhi v-model:title="modelValue"></zizhi>如何让父组件和子组件的数据进行双向绑定呢？
示例：
<!-- 父组件 --><template><view class="container"><view class="zhis">new:{{modelValue}}</view><button type="default" @click="changeto">heihito</button><!-- 父组件之中，用v-model参数向子组件传递数据 --><zizhi v-model:title="modelValue"></zizhi></view>
</template><script>export default {data() {return {modelValue: 0}},methods: {changeto() {this.modelValue += 1}}}
</script>子组件：
<template><view><view class="az">子组件：{{title}}</view><button type="default" @click="changeto1">heihi</button></view>
</template><script>export default {name: "zizhi",emits: ['update:title'],props: {title: Number},data() {return {};},methods: {changeto1() {<!-- 当子组件中的值发生改变时，把新值传递给父组件 -->this.$emit('update:title', this.title + 1)}}}
</script>处理 v-model 修饰符
让我们创建一个示例自定义修饰符 capitalize，它将 v-model 绑定提供的字符串的第一个字母大写。
添加到组件 v-model 的修饰符将通过 modelModifiers prop 提供给组件。在下面的示例中，我们创建了一个组件，其中包含默认为空对象的 modelModifiers prop。
请注意，当组件的 created 生命周期钩子触发时，modelModifiers prop 包含 capitalize，其值为 true——因为它被设置在 v-model 绑定 v-model.capitalize="bar"。
<!-- 我是父组件 -->
<template><view class="container"><zizhi v-model:title.cap="modelValue"></zizhi></view>
</template><script>export default {data() {return {modelValue: 'azxvd'}}}
</script>子组件：
<!-- 我是 synA子组件-->
<template><view><view class="az">子组件：{{title}}</view><input type="text" :value="title" @input="emitValue" style="border: red solid 1px;"></view>
</template><script>export default {name: "zizhi",emits: ['update:title'],props: {title: String,titleModifiers: {default: () => ({})}},created() {console.log(this.titleModifiers) // { capitalize: true }},data() {return {};},methods: {emitValue(e) {let value = e.detail.valueif (this.titleModifiers.cap) {value = value.charAt(0).toUpperCase() + value.slice(1)}//charAt() 方法可返回指定位置的字符//toUpperCase() 方法用于把字符串转换为大写//slice() 方法可从已有的数组中返回选定的元素console.log("value: ", value);this.$emit('update:title', value)}}}
</script>
)
