Menu
In export default {} method, there is a name property to define the component name, which is usefull in dev tool, but what's the equation in new <script setup> tag?
875
Component names should always be multi-word, except for root App components, and built-in components provided by Vue, such as <transition> or <component> . This prevents conflicts with existing and future HTML elements, since all HTML elements are a single word.
Vue components are written as a combination of JavaScript objects that manage the app's data and an HTML-based template syntax that maps to the underlying DOM structure.
Local Registration in a Module System Then each of those components can be imported as need may arise before you register them in the new . vue or . js file: import ComponentA from './ComponentA' import ComponentC from './ComponentC' export default { components: { ComponentA, ComponentC }, // ... }
When we want to globally register a component in Vue, we need to do it in this file. All you have to do is import your component, as you usually would, and then register it using app. component . import { createApp } from 'vue' import App from './App.
Declaring Additional Options
The <script setup> syntax provides the ability to express equivalent functionality of most existing Options API options except for a few:
nameinheritAttrsIf you need to declare these options, use a separate normal block with export default:
<script>
export default {
name: 'CustomName',
inheritAttrs: false,
customOptions: {}
}
</script>
<script setup>
// script setup logic
</script>
Source: link
62
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
