vue 自定义组件实现v-mode

1. 有时候我们需要对自定义的组件实现v-model的双向绑定

2. 首先我们得知道v-model的原理
   v-model实际是v-bind和v-on的语法糖的写法

   语法糖v-model的写法

   <input v-model='value' /> 
   

   不使用语法糖

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

所以我们封装自己的组件就可以利用这点来封装

实现方式1:

<template>
  <div>
    <input
      type="text"
      :value="value"
      @input="inputEvent"
    >
  </div>
</template>

<script>
export default {
  model: { // 自定义组件实现v-model必须要 model 属性
    prop: 'value', // prop 就是 props 传的数据
    event: 'change1', // event 的值要和 $emit 派发的事件名一致
  },
  props: {
    value: {
      type: [String, Number],
      default: ''
    }
  },
  data() {
    return {
    };
  },
  methods: {
    inputEvent(val) {
      this.$emit('change1', val.target.value);
    }
  }
};
</script>

<style scoped>
</style>

实现方式二

<template>
  <div>
    <input
      type="text"
      :value="value"
      @input="inputEvent"
    >
  </div>
</template>

<script>
export default {
  props: {
    value: { // 必须接收value属性
      type: [String, Number],
      default: ''
    }
  },
  data() {
    return {
    };
  },
  methods: {
    inputEvent(val) {
      this.$emit('input', val);
      this.$emit('change', val);
    }
  }
};
</script>

<style scoped>
</style>

然后在组件中使用

<template>
	<BaseVue v-model="value1" />
</template>

<script>
	import BaseVue from './base.vue'
	export default {
		components: {
			BaseVue 
		},
		data() {
			return {
				value1: '99'
			}
		}
	}
</script>