VUE 创建组件常见的几种方式

news/2024/12/22 14:59:34/

在 Vue.js 中,组件的创建和使用通常遵循以下三种方法:

1. 全局组件

全局组件是通过 Vue.component() 方法创建的,注册后的组件可以在任何新创建的 Vue 实例(包括根实例)的模板中使用。

Vue.component('my-component', {template: '<div>这是一个全局组件</div>'
})// 在 Vue 实例的模板中直接使用
<my-component></my-component>

2. 局部组件

局部组件是在 Vue 实例或组件的 components 选项中定义的,只能在当前 Vue 实例或组件的模板中使用。

const MyComponent = {template: '<div>这是一个局部组件</div>'
}export default {components: {'my-component': MyComponent},// ...
}// 在该组件的模板中使用
<my-component></my-component>

3. 单文件组件 (SFCs)

单文件组件(Single File Components,简称 SFCs)是 Vue.js 官方推荐的一种组件编写方式,它将一个组件的模板、JavaScript 和 CSS 写在同一个 .vue 文件中。

MyComponent.vue

<template><div>这是一个单文件组件</div>
</template><script>
export default {// ...
}
</script><style scoped>
/* 组件的样式 */
</style>

要在其他组件或 Vue 实例中使用单文件组件,你需要使用构建工具(如 Webpack 或 Vite)和相应的加载器(如 vue-loader 或 @vitejs/plugin-vue)来处理 .vue 文件。然后你可以像局部组件那样在 components 选项中注册它。

import MyComponent from './MyComponent.vue'export default {components: {'my-component': MyComponent},// ...
}// 在模板中使用
<my-component></my-component>

这三种方法可以根据你的项目需求进行灵活选择。对于小型项目或快速原型,全局组件可能足够简单和方便。对于大型项目,使用局部组件和单文件组件可以更好地组织代码,提高可维护性和可重用性。


http://www.ppmy.cn/news/1462597.html

相关文章

LeetCode-105-岛屿的最大面积

题目描述&#xff1a;给定一个由 0 和 1 组成的非空二维数组 grid &#xff0c;用来表示海洋岛屿地图。 一个 岛屿 是由一些相邻的 1 (代表土地) 构成的组合&#xff0c;这里的「相邻」要求两个 1 必须在水平或者竖直方向上相邻。你可以假设 grid 的四个边缘都被 0&#xff08…

【HarmonyOS尝鲜课】- 前言

面向人群 本课程适用于HarmonyOS应用开发的初学者。 有无经验的开发者都可以轻松掌握ArkTS语言声明式开发范式&#xff0c;体验更简洁、更友好的HarmonyOS应用开发旅程。 什么是HarmonyOS HarmonyOS&#xff08;鸿蒙操作系统&#xff09;是由华为技术有限公司开发的全场景分…

hls.js实现分片播放视频

前言&#xff1a;hls.js官网&#xff1a;hls.js - npm 一、demo——在HTML中使用 <audio id"audio" controls></audio><script src"https://cdn.jsdelivr.net/npm/hls.jslatest"></script> <script>document.addEventList…

css左右滚动互不影响

想实现左右都可以滚动&#xff0c;且互不影响。 只需要再左边的css里面 .threedlist {cursor: pointer;width: 280px;position: fixed;height: 100vh; /* 定义父容器高度 */overflow-y: auto; /* 只有在内容超过父容器高度时才出现滚动条 */} 如果想取消滚动条样式 .threedli…

elementUI使用el-tabs加el-form导致页面崩溃以及el-form里的input事件丢失问题

elementUI使用el-tabs加el-form导致页面崩溃以及el-form里的input事件丢失问题 解决 el-form外面包一层el-row和el-col&#xff0c;el-tabs也包一层 el-fom e-tabs

大模型融合推荐系统论文总结

Knowledge Prompt-tuning for Sequential Recommendation 论文介绍 本文主要介绍了一种新的序列推荐方法——Knowledge Prompt-tuning for Sequential Recommendation (KP4SR)&#xff0c;该方法通过引入外部知识库&#xff0c;使用知识提示来同时利用领域内和通用知识&#…

转运机器人负载最高可达 1000kg,重复精度高达±5mm

转运机器人&#xff0c;内部搭载ICD系列核心控制器&#xff0c;拥有不同的移载平台&#xff0c;负载最高可达 1000kg;重复精度高达5mm;支持 Wi-Fi漫游&#xff0c;实现更稳健的网络数据交互;无轨化激光 SLAM 导航&#xff0c;配合 3D 避障相机等多传感器进行安全防护。转运器人…

移动硬盘容量消失无法读取的解决方案

在数字化时代&#xff0c;数据的存储和备份变得尤为重要。移动硬盘作为一种便捷、大容量的存储设备&#xff0c;受到许多人的青睐。然而&#xff0c;有时我们可能会遭遇这样的问题&#xff1a;移动硬盘不显示容量且无法访问。这种情况无疑给我们的数据存储和管理带来了巨大的困…