自定义组件的v-model

//input.vue 子组件
<!-- input.vue -->
<template>
<div id='input'>
  <input
    type="text"
    :value="value1" ref='a' v-on:input="$emit('input1',$event.target.value)">
</div>
</template>
<script>
export default {
components: {},
props:{
  value1: String
},
model: {
    prop: 'value1',
    event: 'input1'
},
data() {
  return {
  };
},
computed: {},
watch: {},
methods: {
},
created() {

},
mounted() {

},
beforeCreate() {}, //生命周期 - 创建之前
beforeMount() {}, //生命周期 - 挂载之前
beforeUpdate() {}, //生命周期 - 更新之前
updated() {}, //生命周期 - 更新之后
beforeDestroy() {}, //生命周期 - 销毁之前
destroyed() {}, //生命周期 - 销毁完成
activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='scss' scoped>

</style>

//引用 父组件
<template>
<div id=''>
  <Input v-model="lovingVue"/>
</div>
</template>

<script>
  import Input from '@/components/input.vue'
export default {
components: {
  Input
},
data() {
return {
  lovingVue:'123',
};
},
computed: {},
watch: {
  lovingVue(value){
    console.log(value)
  }
},
methods: {

},
created() {

},
mounted() {

},
beforeCreate() {}, //生命周期 - 创建之前
beforeMount() {}, //生命周期 - 挂载之前
beforeUpdate() {}, //生命周期 - 更新之前
updated() {}, //生命周期 - 更新之后
beforeDestroy() {}, //生命周期 - 销毁之前
destroyed() {}, //生命周期 - 销毁完成
activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='scss' scoped>

</style>

​
官网自定义事件 — Vue.js

​