Vue 自定义v-model

Vue的双向数据绑定就是父组件可以修改子组件同一数据，子组件数据可以修改父组件同一数据。

自定义 v-model

父组件：

<template>
  <div class="home">
    {{ value }}
    <Search v-model="value"></Search>
  </div>
</template>
<script>
import Search from '@/components/Search'
export default {
  data() {
    return {
      value: "123"
    }
  },
  components: {
    Search
  }
}
</script>

子组件：第一种方式

<template>
  <div class="seach">
    <input v-model="val" />
  </div>
</template>
<script>
export default {
  model: {
    prop: "value",
    event: "change"
  },
  props: {
    value: {
      type: String,
      default: ""
    }
  },
  data () {
    return {
      val: ""
    }
  },
  methods: {
    handle() {
      this.val != this.val;
    }
  },
  watch: {
    value: {
      handler () {
        this.val = this.value;
      },
      immediate: true
    },

    val () {
      this.$emit("change", this.val);
    }
  }
}
</script>

子组件：第二种方式

<template>
  <div class="seach">
    <input v-model="val" @input="onInput" />
  </div>
</template>
<script>
export default {
  model: {
    prop: "value",
    event: "input" // 也可以使用change
  },
  props: {
    value: {
      type: String,
      default: ""
    }
  },
  data () {
    return {
      val: ""
    }
  },
  methods: {
    onInput(e) {
      this.val = e.target.value;
      // 也可以使用change 但是要和model属性里面event属性保持一致
      this.$emit("input", this.val);
    }
  },
  watch: {
    value: {
      handler () {
        this.val = this.value;
      },
      immediate: true
    }
  }
}
</script>

上面两个组件实现了子组件Search组件的自定义v-model。