Let’s talk about the name attribute in vue3 and see how to use it!

If you use the <script setup> syntax in vue3 development, some additional processing is required for the name attribute of the component. The following article will talk to you about the usage skills of vue3 name attribute. I hope it will be helpful to you!

For vue@3.2.34 and above, use <script setup> When using a single file component, vue will automatically derive the name attribute based on the component file name. That is, a file named MyComponent.vue or my-component.vue, the name attribute is MyComponent, and when you explicitly define the name attribute in the component, the derived name will be overwritten. [Related recommendations: vuejs video tutorial]

The name attribute of the component can not only be used for <KeepAlive>, but also when using vuejs- When debugging code with the devtools plug-in, the corresponding component can also display its name attribute, which facilitates us to quickly locate the code and debug it. Explicitly defining the name attribute is a good practice.

In addition, if we want to display and define the name attribute in <script setup>, we need to add an additional script, that is:

<script>
  export default {
    name: "MyComponent"
  }
</script>

<script setup>
...
<script>

It's a bit cumbersome, so the community launched unplugin-vue-define-options to simplify this operation.

The steps are very simple:

1. Install

npm i unplugin-vue-define-options -D

2. Configure vite

// vite.config.ts
import DefineOptions from 'unplugin-vue-define-options/vite'
import Vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [Vue(), DefineOptions()],
})

3. If you use typescript to develop, you need to configure typescript support

// tsconfig.json
{
  "compilerOptions": {
    // ...
    "types": ["unplugin-vue-define-options/macros-global" /* ... */]
  }
}

After the installation and configuration is completed, you can use the defineOptions API provided to define the name attribute.

<script setup>
defineOptions({
  name: "MyComponent"  
})
<script>

So how does it do this?

For code using defineOptions:

<script setup>
import { useSlots } from 'vue'
  
defineOptions({
  name: 'Foo',
  inheritAttrs: false,
})
const slots = useSlots()
</script>

The compiled output is:

<script>
export default {
  name: 'Foo',
  inheritAttrs: false,
  props: {
    msg: { type: String, default: 'bar' },
  },
  emits: ['change', 'update'],
}
</script>

<script setup>
const slots = useSlots()
</script>

It can be found that this is the same as what we wrote above The script tags are the same, that is to say, unplugin-vue-define-options uses the vite plug-in to help us write two scripts during the compilation phase, simplifying our development.

(Learning video sharing: web front-end development, Basic programming video)

The above is the detailed content of Let’s talk about the name attribute in vue3 and see how to use it!. For more information, please follow other related articles on the PHP Chinese website!