是否可以在不创建计算或数据的情况下清理道具属性

Question

假设我有一个这样定义的 vue 组件：

TestSelect.vue

<template>
  <v-select
    v-model="selectValue"
    :items="items"
    item-text="name"
    item-value="id"
    @change="changed"
  >
  </v-select>
</template>

<script>
export default {
  props: {
    link: String,
    items: Array,
    value: Number,
  },
  data: (props) => ({
    selectValue: props.value,
    saneLink: props.link.slice(-1) == "/" ? props.link : `${props.link}/`,
  }),
  methods: {
    changed(value) {
      document.location = this.saneLink + value;
    },
  },
};
</script>

这很好用，可以像这样使用：

<test-select
    link="test"
    :value="1"
    :items="[
    { id: 1, name: 'dogbert' },
    { id: 2, name: 'pointy' },
    ]"

></test-select>

或者，喜欢

<test-select
    link="test/"
    :value="1"
    :items="[
    { id: 1, name: 'dogbert' },
    { id: 2, name: 'pointy' },
    ]"

></test-select>

虽然这很好，但出于好奇和简化代码的愿望，我想知道是否有一种方法可以在不定义新数据或计算的情况下清理 prop 属性.

Answer 1

不幸的是，现在您只能直接在 Vue 中验证 props，而不能清理它们。

清理 props 的能力被有意移除以减少 Vue 包的大小，因为使用您提到的计算属性可以达到相同的效果。

不幸的是，这是首选方法。

但是，您可以编写一个自定义插件来执行 prop 清理。

通过粗略的 google 搜索（请不要在未先审核代码的情况下盲目使用此插件），我发现此 Vue 插件旨在允许您将 prop 强制转换为不同的值。

https://github.com/posva/vue-coerce-props

我不能保证该代码的有效性或它可能存在的任何问题，但它是使用推荐的计算属性的替代方法。

是否可以在不创建计算或数据的情况下清理道具属性

Is it possible to sanitize a prop without creating a computed or data property

javascript

vue.js

sanitization

vue-props

是否可以在不创建计算或数据的情况下清理道具 属性

Is it possible to sanitize a prop without creating a computed or data property

javascript

vue.js

sanitization

vue-props

是否可以在不创建计算或数据的情况下清理道具属性