【官方文档】在组件上使用v-model
https://cn.vuejs.org/v2/guide/components.html#在组件上使用-v-model

<input v-model="value">

等价于

<input v-bind:value="value" v-on:input="value = $event.target.value">

<!-- 当value的值变化时,实时将值赋更新到value -->

当用在组件上时

<b-input v-bind:value="value" v-on:input="value = $event"></b-input>

<!-- 当value的值变化时,监听事件event -->

下面是例子:
组件(BInput.vue)上的写法

<input 
  :value="value" 
  v-on:input="$emit('input', $event.target.value)"
>

<!-- 当value变化时,绑定$emit事件将value的值抛出 -->

记得在props里将绑定的值暴露出去:

<script>
export default {
  props: {
    value: String,
  },
}
</script>

引用组件写法

<b-input v-model="value"></b-input>

注意:mpvue上使用input组件会有光标不稳定,输入抖动的坑,不建议使用input组件喔

Logo

前往低代码交流专区

更多推荐