背景：

在项目开发中需要实现一个自定义组件，一个输入框，可以在输入框中输入值检索出值，也可以打开弹窗去选择。

效果如下图：

 目标：

希望该组件可以通过v-model绑定变量，并实现双向绑定

实现：

 //父组件
<LazyBasedataModalTree
          v-model="assitone"
          title="弹窗标题"
          :tableName="tableName"
   ></LazyBasedataModalTree>

data(){
   return{
           assitone:""
        }
}

//子组件
<template>
  <div class="loader">
     <input v-model="text" @on-change="handleChange"></input>
   </div>
</template>

<script>

export default {
  name: "lazyBasedataModalTree",
  model:{
    event:'update'
  },
  data(){
     return{
         assitone:""
     }
  },
  methods: {
    handleChange(){
        this.$emit('update', this.text)
     }
  },
};
</script>

<style scoped>

</style>

 以上代码即可实现双向数据绑定，上述子组件的代码只是提供示例，具体代码需要根据需求去实现。

原理：

实际v-model是由v-bind和on-change事件共同实现的，如下

<LazyBasedataModalTree
          v-bind="assitone"
          @on-change="(val) => assitone = val"
          title="弹窗标题"
          :tableName="tableName"
   ></LazyBasedataModalTree>
//或者
<LazyBasedataModalTree
          :value="assitone"
          @on-change="(val) => assitone = val"
          title="弹窗标题"
          :tableName="tableName"
   ></LazyBasedataModalTree>

因此开发自定义组件，可以自己实现on-change这一步，具体触发事件，可以通过model属性里面的event进行设置。