如何解决是否可以在不创建计算或数据属性的情况下清理道具
假设我有一个这样定义的 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,]"
></test-select>
虽然这很好,但出于好奇和简化代码的愿望,我想知道是否有一种方法可以在不定义新数据或计算属性的情况下清理 prop。
解决方法
不幸的是,现在你只能直接在 Vue 中验证 props,而不是清理它们。
特意删除了清理 props 的功能,以减少 Vue 包的大小,因为可以使用您提到的计算属性来实现相同的效果。
不幸的是,这是首选方法。
但是,您可以编写一个自定义插件来实现道具消毒。
通过粗略的谷歌搜索(请不要在没有首先审核代码的情况下盲目使用该插件),我发现这个 Vue 插件旨在允许您将道具强制转换为不同的值。
https://github.com/posva/vue-coerce-props
我不能保证该代码的有效性或它可能存在的任何问题,但它是使用推荐的计算属性的替代方法。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。