Vue手动实现v-model(完整demo)

老样子先看效果图

第一中实现方式

该方式父组件使用v-model时可以传递初值，使用起来毫无违和感。

1、父组件代码

<template>
  <div class="module-wrapper">
    <div class="parent">
      <h3>父组件</h3>
      <p>值：{{title}}</p>
    </div>
    <div class="children">
      <h3>子组件</h3>
       <children-component v-model="title"/>
    </div>
  </div>
</template>


<script>
import ChildrenComponent from './children-component.vue'
export default {
  components: {
    ChildrenComponent
  },


  data () {
    return {
      title: '初始标题'
    }
  }
}
</script>


<style>
.parent,.children{
  width: 300px;
  display: inline-block;
}
</style>

2、子组件代码

<template>
  <div>
    <input v-model="inputValue" @input="onInput"/>
  </div>
</template>


<script>
export default {
  // 自定义v-model时子组件初值默认取props中的value
  props: ['value'],
  data () {
    return {
      inputValue: ''
    }
  },


  // 使用watch初始化子组件初值
  watch: {
      value : {
        handler () {
          this.inputValue = this.value
        },
        immediate: true //立即触发该监听
      }
  },


  methods: {
    onInput () {
      // input需要对应上面的触发事件
      this.$emit('input', this.inputValue)
    }
  }
}
</script>


<style>


</style>

第二种实现方式使用组件的model属性

关于model实现可以参考vue官方文档自定义事件 — Vue.js

1、父组件代码不变

2、子组件代码

<template>
  <div>
    <input v-model="inputValue" @input="onInput"/>
  </div>
</template>


<script>
export default {
  props: ['oldValue'],


  model: {
    prop: 'oldValue', //要和props中的对应上
    event: 'yourEvent', //事件名可以自定义
  },


  data () {
    return {
      inputValue: ''
    }
  },


  // 使用watch初始化子组件初值
  watch: {
      oldValue : {
        handler () {
          console.log(this.oldValue)
          this.inputValue = this.oldValue
        },
        immediate: true //立即触发该监听
      }
  },


  methods: {
    onInput () {
      // yourEvent需要和上面的model对象中的event对应
      this.$emit('yourEvent', this.inputValue)
    }
  }
}
</script>


<style>


</style>

如果有哪里写的不对请留言，不胜感激。

原文链接：https://huolihua.cn/#/article-detail/2plzs8p56r600000