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进行设置。
更多推荐
已为社区贡献4条内容
所有评论(0)