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.value
if (this.titleModifiers.cap) {
value = value.charAt(0).toUpperCase() + value.slice(1)
}
//charAt() 方法可返回指定位置的字符
//toUpperCase() 方法用于把字符串转换为大写
//slice() 方法可从已有的数组中返回选定的元素
console.log("value: ", value);
this.$emit('update:title', value)
}
}
}
</script>