Vue实现组件自定义数据双向绑定

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