【mpvue】input组件 v-model绑定

K_Kamen_Yip

于 2018-12-20 22:36:32 发布

阅读量8.7k

点赞数 4

CC 4.0 BY-SA版权

文章标签： mpvue vue input v-model 双向绑定

本文链接：https://blog.youkuaiyun.com/weixin_43387238/article/details/85145035

本文详细解析了Vue.js中v-model指令的工作原理，包括其在组件中的应用方式，以及如何在自定义组件中实现双向数据绑定。同时提到了在mpvue环境下使用input组件可能遇到的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

【官方文档】在组件上使用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组件喔