vue自定义组件实现双向绑定方式
作者：six+seven
这篇文章主要介绍了vue自定义组件实现双向绑定方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vue自定义组件实现双向绑定
在项目开发中需要实现一个自定义组件，一个输入框，可以在输入框中输入值检索出值，也可以打开弹窗去选择。
效果如下图
目标
希望该组件可以通过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进行设置。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。