Vue中自定义组件使用v-model

自定义组件中使用v-model

v-model是vue提供的语法糖，默认使用名为value的prop以及名为input中的事件实现数据双向绑定。

一、使用props和input实现自定义组件的v-model

父组件:

<!-- template -->
<child v-model="myData"></child>

// script
data() {
	return {
		myData: 'default value'
	}
}

子组件：

<template>
  <input @input="input" :value="value"/>
</template>

<script>
export default {
    props: {
        value: String,
    },
    methods: {
        input(event) {
            this.$emit('input', event.target.value)
        }
    }
}
</script>

二、使用model选项，Vue2.2.0+中可使用

父组件:

<!-- template -->
<child v-model="myData"></child>

// script
data() {
	return {
		myData: 'default value'
	}
}

子组件：

<template>
  <input @input="input" :value="customVal"/>
</template>

<script>
export default {
    model: {
        event: 'customEvent',
        prop: 'customVal'
    },
    // 必须声明该prop
    props: {
        customVal: String,
    },
    methods: {
        input(event) {
            this.$emit('customEvent', event.target.value)
        }
    }
}
</script>