Vue实现组件自定义数据双向绑定
程序员文章站
2022-06-07 17:58:09
...
自定义v-model语法糖
基本用法
v-model默认方式:
通过在组件上定义一个名为value的props,
同时对外暴露一个名为input的事件。
满足于基本的表单文本框数据绑定使用。
- 组件源码
<template>
<div class="u-input">
<input :value="value" @change="$_handleChnage"/>
</div>
</template>
<script>
export default {
props: {
value: {
type: String,
default: ''
}
},
methods: {
$_handleChnage(e) {
this.$emit('input', e.target.value)
}
}
}
</script>
<style lang="scss" scoped>
...
</style>
- 使用方式
<u-input v-model="content"/>
自定义属性和事件
通过model实现自定义的属性和事件
当用户要实现较为复杂的自定义组件时,默认是v-model语法糖无法满足需求,需要自定义组件的属性和方法;
例如:自定义开关switch、checkbox等。
- 组件源码
<template>
<div>
<div class="u-switch" :class="{'u-switch--active': active}" @click="$_handleClick">
{{ active ? '开' : '关' }}
</div>
</div>
</template>
<script>
export default {
model: {
event: 'change',
prop: 'active'
},
props: {
active: {
type: Boolean,
default: false
}
},
methods: {
$_handleClick() {
const active = !this.active
this.$emit('change', active)
}
}
}
</script>
<style lang="scss" scoped>
...
</style>
- 使用方式
<u-switch v-model="active" @change="$_switchHandle"/>
使用.sync,实现更优雅的数据双向绑定
主要应用于dialog、loading等组件的实现。
- 组件源码
<template>
<div>
<div class="u-loading" v-if="loading" @click="$_handleClick">
加载中...
</div>
</div>
</template>
<script>
export default {
props: {
loading: {
type: Boolean,
default: false
}
},
methods: {
$_handleClick() {
const loading= !this.loading
this.$emit('update:loading', loading)
}
}
}
</script>
<style lang="scss" scoped>
...
</style>
- 使用方式
<u-loading :loading.sync="loading"/>
v-model与.sync的异同点
相同点
- 两者都是语法糖,目的都是为了实现组件与外部数据的双向绑定;
- 都是通过在组件内定义属性+对外暴露事件实现的。
不同点
- 一个组件只能一定一个v-model;可以定义多个.sync属性;
- v-model的默认暴露事件为input事件,可以通过配置model选项修改事件名称;.sync暴露事件固定名称为’update:属性名’。
推荐阅读
-
Vue使用.sync 实现父子组件的双向绑定数据问题
-
Vue组件内部实现一个双向数据绑定的实例代码
-
Vue 框架之键盘事件、健值修饰符、双向数据绑定
-
vue-video-player 通过自定义按钮组件实现全屏切换效果【推荐】
-
Vue实现用户自定义字段显示数据的方法
-
Vue2.0利用 v-model 实现组件props双向绑定的优美解决方案
-
vue.js利用Object.defineProperty实现双向绑定
-
VUE-Table上绑定Input通过render实现双向绑定数据的示例
-
vue数据双向绑定原理解析(get & set)
-
vue.js的双向数据绑定Object.defineProperty方法的神奇之处