eslint-plugin-vue
eslint-plugin-vue copied to clipboard
vuejs
`prefer-builtin-properties-and-methods`
Please describe what the rule should do:
Prefer use $emit, $slots, etc in <template> instead of variables defined in <script>.
What category should the rule belong to?
[x] Enforces code style (layout) [ ] Warns about a potential error (problem) [ ] Suggests an alternate way of doing something (suggestion) [ ] Other (please specify:)
Provide 2-3 code examples that this rule should warn about:
<!-- Bad -->
<script setup>
const emit = defineEmits('foo')
</script>
<template>
<button @click="emit('foo')">Foo</button>
</template>
<!-- Good -->
<script setup>
const emit = defineEmits('foo')
</script>
<template>
<button @click="$emit('foo')">Foo</button>
</template>
<!-- Bad -->
<script setup>
import { useSlots, useAttrs } from 'vue'
const slots = useSlots()
</script>
<template>
<div>
<div v-if="slots.foo"><slot name="foo"></slot></div>
</div>
</template>
<!-- Good -->
<script setup>
import { useSlots, useAttrs } from 'vue'
const slots = useSlots()
</script>
<template>
<div>
<div v-if="$slots.foo"><slot name="foo"></slot></div>
</div>
</template>
Additional context
It can also apply to other properties and methods
Thank you for proposing the rule. That rule sounds good to me. But some users may prefer the opposite style. I think it would be better if it was an option. What do you think?
