-
Notifications
You must be signed in to change notification settings - Fork 545
This issue was moved to a discussion.
You can continue the conversation there. Go to discussion →
New issue
Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? # to your account
prop sugar #229
Comments
I really like the prop label, what if we wanna declare many props like this: <script setup>
prop: num= {
type:Boolean,
default:4}
prop: msg= {
type:String,
required:true
validator:(val) => ![""].includes(val)
}
</script> |
@dajpes now that the <script setup> RFC uses <script setup>
import { defineProp } from 'vue'
prop: num = 4
prop: msg = defineProp({
type: String,
required: true
validator: (val) => ![""].includes(val)
})
</script> So we can still define each People could also use <script setup>
import { defineProps } from 'vue'
prop: ({ num, msg } = defineProps({
num: {
type: Number,
default: 4
},
msg: {
type: String,
required: true
validator: (val) => ![""].includes(val)
}
}))
</script> |
A supplement* |
For reference to this discussion, the |
Sorry forgot to reply... I already added IDE support for defineProps. Please use volar if want to try. |
import { defineProps } from 'vue'
prop: ({ num, msg } = defineProps({
num: {
type: Number,
default: 4,
},
msg: {
type: String,
required: true,
},
})) I wrote like above and reported an error |
the way I am declaring props with <script setup>
const props = defineProps({
num1: {
type: Number,
default: 6
},
num2 {
type: Number,
default: 8
}
})
</script> This seems to work fine, and you can call those values on the Hope it helps |
I am having a thought about the fact that one advantage of composition API is that you can group codes together by feature, but currently with <script setup>
const props = defineProps({
prop1: { type: String, default: 'default' },
prop2: { type: Number, required: true },
prop3: String,
prop4: { type: Boolean, default: false }
})
</script> Then from #369, we have <script setup>
const prop1 = $prop({ type: String, default: 'default' })
const prop2 = $prop({ type: Number, required: true })
const prop3 = $prop(String)
const prop4 = $prop({ type: Boolean, default: false })
</script> this way we can put our props anywhere we want. |
I didn't update this issue so far because I was waiting for ref sugar to stabilize. I still think that this would be good for the reasons you state here (ability to group together logic for related features). There was a comment from Evan in another issue saying that he is already thinking about allowing sugary destructuring for const { prop1, prop2, prop3, prop4 } = defineProps({
prop1: { type: String, default: 'default' },
prop2: { type: Number, required: true },
prop3: String,
prop4: { type: Boolean, default: false }
})
</script> I think this would already be a big improvement. A problem I see is that with this, we end up repeating a lot the variable names, and more with TS and interface Props {
msg?: string
labels?: string[]
}
const { msg, labels } = withDefaults(defineProps<Props>(), {
msg: 'hello',
labels: () => ['one', 'two']
}) I think that a <script setup>
const prop1 = $prop<string?>({ default: 'default' })
const prop2 = $prop<number>({ required: true })
const prop3 = $prop<string>()
const prop4 = $prop<boolean?>({ default: false })
</script> |
vs Why not just allow I am in strong support of adding defaults and validators to
|
This issue was moved to a discussion.
You can continue the conversation there. Go to discussion →
I want to avoid commenting on the Ref Sugar RFC about this because it may interfere in the discussion about
ref:
. I tried to find if the following proposal was discussed before but I couldn't find public discussions about it. Sorry for the noise if this was already analyzed.Context
In the RFC it is stated that
I think that it is on point, but there is also an asymmetry in the usage of props in the template and in the <script>. For simple components, we would end up with:
With ref sugar, we can move the onClick handler to the script without the
.value
. But if we want to move the multiplication out of the template, we can not directly copy it in a computed, because we need to add theprops.
We could convert the prop to a ref, taking care not to lose reactivity while destructuring (this is also something that we need also when passing the props to composables). We also need to explain what
toRefs
is achieving and the prop name needs to be repeated.The DX also suffers from extra boilerplate needed in this case. If
ref:
ends up being adopted, I think that having better ergonomics for props could also outweighs the cost of adding new syntax.Proposal
Following the same model as
ref:
, we introduce a new labelprop:
to declare components props:When a prop is defined in this way, you can directly use its value in the template and in the script, and reactivity works properly.
Edited:
We could add a
defineProp
type-only helper to support complex validation of props:Implementation
prop:
, it is aggregated to the props block of the component.props.num
.ref:
, if you use$num
it is replaced withtoRef(props,'num')
, so you get a ref that you can pass to composables. If a different syntax is pushed to get the reference fromref:
, that will be the syntax forprop:
too (the important part is that they work in the same way).Benefits
ref:
withprop:
and refactoring is easier because you do not need to addprops.
andtoRef
in all the places the prop is being used.prop:
is optional, if you want a custom validator for example you can declare that props in the normal props blockCons
ref:
).ref:
Alternative
prop:
wants to be avoided,export let
could be used to declare props as svelte does. But I think thatprop:
plays better withref:
for Vue.The text was updated successfully, but these errors were encountered: