欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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:属性名’。