自定义组件v-model的理解

最新推荐文章于 2025-03-26 10:01:19 发布

憋废话_开码

最新推荐文章于 2025-03-26 10:01:19 发布

阅读量200

点赞数

文章标签： vue.js javascript 前端后端

本文链接：https://blog.youkuaiyun.com/qq_43683622/article/details/131421628

版权

Vue 专栏收录该内容

1 篇文章

订阅专栏

文章通过一个示例详细解释了如何在Vue中为自定义组件实现v-model双向绑定。首先，v-model被拆解为v-bind:value和v-on:input，然后通过props将父组件的值传给子组件，并在子组件内部监听childValue的变化，当输入框值改变时，触发input事件，将新值通过this.$emit(input,val)回传给父组件，从而达到数据同步的效果。

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

问题出现场景：在学习Vue的过程中对于自定义组件实现v-model双向绑定时有些疑问，经过不管实践，问题得以解决，特此记录一下，如有不对的地方希望大家积极指出来，感谢阅读！😄

自定义组件如何实现v-model，请看如下3个代码文件加后续分析

文件1：index1.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>数字输入框</title>
</head>
<body>
<div id="app1">
  <input-component v-model="inputValue"></input-component>
  <p>{{inputValue}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="static/js/inputCompoment.js"></script>
<script src="static/js/index1.js"></script>
</body>
</html>

文件2：inputCompoment.js

<!-- 自定义组件实现 v-model 的理解 -->
Vue.component('inputComponent', {
  template: `
    <div class="input-number">
    <input type="text" :value="childValue" @input="charge">
    </div>`,
  data: function () {
    return {
      childValue: this.value
    }
  },
  props: {
    value: {
      type: Number,
      default: 0
    }
  },
  watch: {
    childValue: function (val) {
      this.$emit('input',val)
    }
  },
  methods: {
    charge: function (event) {
      this.childValue = event.target.value.trim()
    }
  }

})

文件3：index1.js

var VueApp = new Vue({
  el: '#app1',
  data: {
    inputValue: 666,
  }
})

温馨提示：说明1-01代表文件1的第1行代码，以此类推

分析：首先明白，自定义组件实现v-model的目的是要实现数据的双向绑定，通过资料查知v-model是一个语法糖，它的全写是 v-bind:value = exampleValue v-on:input="exampleValue = $event"，知道了这个，已经取得了一半的胜利， <input-component v-model="inputValue"></input-component>等价于 <input-component v-bind:value = inputValue v-on:input="inputValue = $event" ></input-component>，v-bind:value = inputValue的意思是给子组件传递一个inputValue值，子组件通过props为value的键来接收，由于我不想让子组件直接使用父组件传过来的值，所以有了2-09的写法，此时childValue就是父组件传过来的值，接下来我们让文本框中的初始值就为这个值，也就是2-05的写法，同时1-11的写法用来同步显示输入框中当前的文本，现在实现了第一步，数据得到了展示，接下来我要实现当我修改输入框中的值的时候，下面的p标签中的值同步更新，所以有了2-05的@input="charge"的写法，当我们向输入框中输入数据时会触发input事件，进而执行charge函数，函数会携带触发这个函数的事件，也就是input事件，2-25行的写法将会更新childValue的值，而因为我又监听了childValue的值，所以将会执行2-20的写法，这就是双向绑定的精髓所在，this.$emit('input',val)意为触发父组件的input事件，并将新值携带过去，也就是到了v-model的全写的 v-on:input="inputValue = $event"的地方，我会将携带的这个新值赋值给inputValue ，而下面的p标签刚好展示的是inputValue的值，所以视觉上产生了文本框与p标签数据同步的效果