当前位置：首页 > news >正文

解决Vue3中使用setup如何定义组件的name属性

news 来源：原创 2024/11/15 0:56:09

vue2的书写name:

<template>
  <div></div>
</template>

<script>
export default {
  name: "nameoption",
};
</script>

<style lang="scss" scoped></style>

解决：Vue3中使用setup如何定义组件的name属性

使用setup语法糖的写法：在写一个script标签

方式1：

<template>
  <div></div>
</template>
<script>
export default {
  name: "nameOption",
};
</script>

<script setup></script>

<style lang="scss" scoped></style>

方式2：

安装：unplugin-vue-define-options ， Element Plus中都是使用这个插件来对组件名进行注册的
cnpm install unplugin-vue-define-options -D

在 vite.config.ts

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

import DefineOptions from 'unplugin-vue-define-options/vite';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(), DefineOptions()],
});

在tsconfig.json文件进行配置(不是ts的可以忽略)

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

在vuecli创建的项目的vue.config.js

const { defineConfig } = require("@vue/cli-service");
module.exports = defineConfig({
  transpileDependencies: true,
  configureWebpack: {
    plugins: [require("unplugin-vue-define-options/webpack")()],
  },
});

使用：

<template>
   
</template>

<script lang="ts" setup>
  defineOptions({
    name: 'nameOption',
  });
</script>

<style scoped></style>

方式3：

安装插件 cnpm install vite-plugin-vue-setup-extend -D
集成插件在vite.config.ts文件引入vite-plugin-vue-setup-extend

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueSetupExtend from 'vite-plugin-vue-setup-extend'

export default defineConfig({
  plugins: [vue(), vueSetupExtend()]
})

直接在script的标签上定义name值

<script setup lang="ts" name="Layout">

</script>
<template>
  <div>layout</div>
</template>

<style lang="less" scoped></style>

不使用setup语法糖

方式1:早期的写法

<template>
  <div>

  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  name:'nameOptions',
  setup () { 
    return {}
  }
})
</script>

<style scoped>

</style>

方式2

<template>
  <div>

  </div>
</template>

<script>
import { reactive, toRefs } from 'vue'

export default {
  name:'nameOption',
  setup () { 
    return {}
  }
}
</script>

<style lang="scss" scoped>

</style>