vue自定义组件实现双向绑定

背景：

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

效果如下图：

 目标：

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

实现：

 //父组件


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

//子组件

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

原理：

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

//或者

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