vue组件 .vue_对Vue组件道具的一系列有用的增强

vue组件 .vue

Vue Messenger (Vue Messenger)

A series of useful enhancements to Vue components props:

对Vue组件道具的一系列有用的增强：

安装 (Install)

包 (Package)

# yarn
yarn add vue-messenger

# or, npm
npm i vue-messenger --save

CDN (CDN)

• jsDelivr

  jsDelivr

• UNPKG

  联合国儿童基金会

Available as global VueMessenger.

作为全球VueMessenger 。

用法 (Usage)

安装mixin (Install mixin)

全球范围 (Globally)

// main.js
import Vue from 'vue'
import Messenger from 'vue-messenger'

Vue.mixin(Messenger)

在本地 (Locally)

// Component.vue
import Messenger from 'vue-messenger'

export default {
  mixins: [Messenger],
  // ...
}

改造道具 (Transform props)

To transform a prop, add a transform: value => transformedValue function to its descriptor, and use this.local${PropName} to get transformed prop. e.g.

要转换道具，请在其描述符中添加一个transform: value => transformedValue函数，并使用this.local${PropName}获取转换后的道具。 例如

😑之前 (😑 before)

<template>
  <div>{{ normalizedMessage }}</div>
</template>

<script>
export default {
  props: {
    message: [Number, String]
  },
  computed: {
    normalizedMessage() {
      return String(this.message).trim().replace(/@/g, '(a)')
    }
  }
}
</script>

😀之后 (😀 after)

<template>
  <div>{{ localMessage }}</div>
</template>

<script>
export default {
  props: {
    message: {
      type: [Number, String],
      transform: message => String(message).trim().replace(/@/g, '(a)')
    }
  }
}
</script>

枚举型道具 (Enum-type props)

To define a enum-type prop, add a enum array to its descriptor, and its default value will be enum[0] if the descriptor doesn't contain default attribute. e.g.

要定义枚举类型的道具，请在其描述符中添加一个enum数组，如果描述符不包含default属性，则其default值为enum[0] 。 例如

😑之前 (😑 before)

export default {
  props: {
    size: {
      type: String,
      default: 'small',
      validator: value => ['small', 'large'].indexOf(value) >= 0
    }
  }
}

😀之后 (😀 after)

export default {
  props: {
    size: {
      type: String,
      enum: ['small', 'large']
    }
  }
}

数值型道具 (Numeric-type props)

To define a numeric-type prop, add numeric: true to its descriptor. Besides, you can set infinite to ture to allow infinite numbers, which are -Infinity and Infinity. e.g.

要定义数值型道具，请在其描述符中添加numeric: true 。 此外，您可以将infinite设置为ture以允许无限数，即-Infinity和Infinity 。 例如

😑之前 (😑 before)

export default {
  props: {
    count: {
      type: [Number, String],
      default: 0,
      validator: value => !isNaN(value - parseFloat(value))
      }
    },
    max: {
      type: [Number, String],
      default: Infinity,
      validator: value => value === Infinity || !isNaN(value - parseFloat(value))
    }
  }
}

😀之后 (😀 after)

export default {
  props: {
    count: {
      numeric: true,
      default: 0
    },
    max: {
      numeric: true,
      infinite: true,
      default: Infinity
    }
  }
}

听接收道具 (Listen for receiving props)

To listen for receiving a prop, add on: { receive: (newValue, oldValue) => void } object to its descriptor. e.g.

要收听接收道具，请on: { receive: (newValue, oldValue) => void }其描述符on: { receive: (newValue, oldValue) => void }添加on: { receive: (newValue, oldValue) => void }对象。 例如

😑之前 (😑 before)

export default {
  props: {
    count: [Number, String]
  },
  watch: {
    count: {
      immediate: true,
      handler(newCount, oldCount) {
        console.log(newCount, oldCount)
      }
    }
  }
}

😀之后 (😀 after)

export default {
  props: {
    count: {
      type: [Number, String],
      on: {
        receive(newCount, oldCount) {
          console.log(newCount, oldCount)
        }
      }
    }
  }
}

双向数据绑定道具 (Two-way data binding props)

To apply two-way data bindings on a prop, add sync: true to its descriptor. Then, you can use this.local${PropName} = newValue or this.send${PropName}(newValue) to send new value to Parent component.

要将双向数据绑定应用于道具，请在其描述符中添加sync: true 。 然后，您可以使用this.local${PropName} = newValue或this.send${PropName}(newValue)将新值发送给Parent组件。

If the prop is model prop, it's no need to add sync: true to its descriptor.

如果道具是模型道具，则无需在其描述符中添加sync: true 。

😑之前 (😑 before)

<!-- // Parent.vue -->
<template>
  <Child v-model="value" :visible.sync="visible" />
</template>

<script>
import Child from './Child.vue'

export default {
  components: { Child },
  data: () => ({
    value: String,
    visible: Boolean
  })
}
</script>

<!-- // Child.vue -->
<template>
  <div v-show="curVisible">
    <input v-model="curValue" />
  </div>
</template>

<script>
export default {
  props: {
    value: String,
    visible: Boolean
  },
  computed: {
    curValue: {
      get() {
        return this.value
      },
      set(newValue) {
        if (newValue === 'hide') {
          this.curVisible = false
        }
        this.$emit('input', newValue)
      }
    },
    curVisible: {
      get() {
        return this.visible
      },
      set(newVisible) {
        this.$emit('update:visible', newVisible)
      }
    }
  }
}
</script>

😀之后 (😀 after)

<!-- // Parent.vue -->
<template>
  <Child v-model="value" :visible.sync="visible" />
</template>

<script>
import Child from './Child.vue'

export default {
  components: { Child },
  data: () => ({
    value: String,
    visible: Boolean
  })
}
</script>

<!-- // Child.vue -->
<template>
  <div v-show="localVisible">
    <input v-model="localValue" />
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: String,
      on: {
        change(value) {
          if (value === 'hide') {
            this.localVisible = false
          }
        }
      }
    },
    visible: {
      type: Boolean,
      sync: true
    }
  }
}
</script>

翻译自: https://vuejsexamples.com/a-series-of-useful-enhancements-to-vue-component-props/

vue组件 .vue