Vue3 setup 语法糖下如何定义组件名称

相见一月

已于 2022-10-15 16:18:54 修改

阅读量2.1k

点赞数 1

文章标签： vue.js javascript 前端

于 2022-10-15 16:17:14 首次发布

本文链接：https://blog.csdn.net/weixin_59916662/article/details/127336651

版权

插件名称：vite-plugin-vue-setup-extend

1、安装

npm i vite-plugin-vue-setup-extend -D

2、配置 ( vite.config.ts )

import { defineConfig } from 'vite'
import VueSetupExtend from 'vite-plugin-vue-setup-extend'
export default defineConfig({
  plugins: [ 
    vue(),
    VueSetupExtend(),
 ]
})

3、使用

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

</script>

优惠劵

相见一月

关注关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
Vue3 setup 语法糖下如何定义组件名称

Vue3 setup 语法糖下自定义组件名称
复制链接

扫一扫

Vue v-model组件封装(类似弹窗组件)

10-15

主要介绍了Vue中的 v-model组件封装(类似弹窗组件),本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下

vue 组件销毁并重置的实现

10-15

主要介绍了vue 组件销毁并重置的实现,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

参与评论您还未登录，请先登录后发表或查看评论

在vue3+ts+setup语法糖中使用图片预览组件

09-14

在vue3+ts+setup语法糖中使用图片预览组件，下载直接安装运行

vue3 使用setup语法糖之后设置页面name方法

欢迎来到我的博客！在这里，我将分享我在前端开发方面的知识和经验。让我们一起探索前端开发的无限可能！

12-21

1329

设置name的用处：页面缓存需要识别页面的唯一name属性才可以缓存。

Vue3——第七章（组件展示时的名称：name）

why404

01-10

1847

Vue3——第八章（组件展示时的名称：name）

Vue3 setup语法糖写法给组件添加name属性

qq_42294411的博客

04-05

648

Vue3 setup语法糖写法给组件添加name属性

vue3 + vite + ts + setup , 第三练 setup ts语法糖中如何使用全局组件，递归组件，动态组件

csl125的博客

04-20

3834

vue3+setup+ts Vue3 使用setup语法糖+ts中如何使用全局组件，如何使用递归组件，setup语法糖组件调用自身的问题如何解决

在vue3+setup+ts中使用内置动态组件component

stay hungry, stay foolish

04-20

4652

component是vue的内置组件，不需要注册可以直接使用。通过is去选择要渲染的组件，可以是一个组件名称字符串（使用在选项式API中），也可以是组件的定义（使用在组合式 API中）。

vue3语法糖自定义组件使用v-model

weixin_44952708的博客

03-08

2088

默认情况下，组件上的 v-model 使用 modelValue 作为 prop 和 update:modelValue 作为事件。我们可以通过向 v-model 传递参数来修改这些名称 //father.vue <template> <div> {{bookTitle}} <Child v-model:title="bookTitle" v-model:name="name"></Child> {{name}} .

【Vue3 + Vite + setup语法糖 + Pinia + VueRouter + Element Plus】开发框架

01-09

该项目集成了 Vue3 Vite setup语法糖 Pinia VueRouter Element Plus Axios 等，目前公司必备开发知识、已封装为二次开发框架，减少项目构建以提升开发效率，基础语法偏多，更适合于基础较弱的同学。其中包括了...

3D-Banner:基于Vue开发的3D轮播图组件模仿锤子商城3D视差轮播图

04-28

基于Vue开发的3D轮播图组件在线Demo：高仿锤子商城官网轮播图，3D视差效果，实现后台可灵活配置，定时自动轮播原作者 ; 二次开发 ; 本作者三次开发，且本人为后台开发人员，非专业前端，如有错误敬请谅解 Build ...

vue3组合式api，组件的命名方法详解

dxh9231028的博客

06-27

4423

在vue3组合式api中，我们可以如下命名这样便可以轻松命名组件，但是我们通常使用setup语法糖形式()来写代码，一旦使用语法糖，便不能再使用上述命名方法，以下我统计了一些setup语法糖的组件命名方法。

【Vue3】第十一部分 setup语法糖

Trees__的博客

09-17

1528

1. 引入组件的时候不需要注册组件 2. 定义变量的时候不需要return出去,顶层的绑定会暴露给模板,模板中可以直接使用 3. 使用 defineProps 、defineEmits 、defineExpose 等API，它们将自动地在中可用

setup语法糖name增强，使vue3语法糖支持name属性。

m0_68716504的博客

11-23

114

vue3语法糖默认是没有name属性的，在我们使用keep-alive的时候需要用到name。当我们需要在setup语法糖中使用name这时就可以借助插件vite-plugin-vue-setup-extend。

Vue3中setup语法糖下定义组件的name属性

weixin_54167801的博客

06-02

8151

Vue3中setup语法糖下定义组件的name属性

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

weixin_45441173的博客

01-16

1903

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

vue3动态组件使用

m0_62317155的博客

03-27

1370

Vue3动态组件的使用

【在线OJ】Vue创建OJ管理系统

最新发布

qq_61903414的博客

05-07

286

vue ui命令创建项目项目创建完成后来到项目。

vue3setup语法糖如何获取组件实例

05-10

在 Vue 3 中，可以使用 `ref` 函数创建响应式的引用对象，而在组件内部，可以使用 `setup` 函数来获取到组件实例。假设你有一个组件 `MyComponent`，那么可以在 `setup` 函数中将组件实例存储在一个 `ref` 对象中，如下所示： ``` <template> <div> <p>{{ message }}</p> <button @click="changeMessage">Change Message</button> </div> </template> <script> import { ref, onMounted } from 'vue' export default { setup() { const message = ref('Hello, world!') const changeMessage = () => { message.value = 'Hello, Vue 3!' } onMounted(() => { console.log('Component mounted') }) return { message, changeMessage } } } </script> ``` 在上面的例子中，我们首先通过 `ref` 函数创建了一个响应式的引用对象 `message`，并将其初始化为 `'Hello, world!'`。然后，在 `setup` 函数中，我们定义了一个 `changeMessage` 方法，用于改变 `message` 的值。最后，我们通过 `return` 语句将 `message` 和 `changeMessage` 导出，以便在模板中使用。当模板中的按钮被点击时，`changeMessage` 方法会被调用，它将 `message.value` 的值改为 `'Hello, Vue 3!'`。这个改变会自动触发模板中绑定到 `message` 的数据发生变化，从而更新视图。需要注意的是，在 `setup` 函数中，我们可以使用 `onMounted` 钩子函数来执行一些组件初始化的操作，例如在组件挂载后打印一条消息。同时，我们还可以通过 `getCurrentInstance` 函数来获取当前组件实例，例如： ``` import { getCurrentInstance } from 'vue' export default { setup() { const instance = getCurrentInstance() // ... } } ``` 通过以上方法，我们就可以在 Vue 3 中获取到组件实例了。

“相关推荐”对你有帮助么？

非常没帮助
没帮助
一般
有帮助
非常有帮助

提交