哪种方式更好地创建 vue 组件(导出默认值、defineComponent 和新 Vue)

2024-02-29

最近学习 Vue.js 后,我对如何编写 vue 组件语法感到非常困惑 我一直在看 YouTube 教程和文章,每个人都使用不同的方法。

就 vue 3 而言 我们应该使用 导出默认值以创建组件 或导出默认的defineComponent 或新的 Vue({

那么如何决定如何创建应用程序组件及其其余子组件和页面等的正确方法..

希望我的问题足够清楚。

Thanks


如果您需要创建多个组件,我强烈建议使用单文件组件 https://v3.vuejs.org/guide/single-file-component.html#introduction (SFC)

在这里,您将一个新组件定义为(在<script> tag):

import { defineComponent } from 'vue'
export default defineComponent({
  // ...
})

(or export default {}如果不使用 TypeScript)

对于主应用程序组件,您可以这样做:

import { createApp } from "vue";
const app = createApp(App)
app.mount('#app')

或者就像这样,如果你不需要使用 vue-router、Vuex 等来扩展 Vue。

import { createApp } from "vue";
createApp(App).mount('#app')
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

哪种方式更好地创建 vue 组件(导出默认值、defineComponent 和新 Vue) 的相关文章

随机推荐

  • 流行 Android 手机支持的相机预览尺寸

    我正在使用相机预览帧 并且需要决定我将使用的最小预览尺寸 我需要相当高的分辨率 并且正在尝试找出我可以在更流行的 Android 手机和操作系统版本上获得的最高预览分辨率 根据判断关于 Nexus One Froyo 预览尺寸的问题 htt
  • 使用显式与隐式意图启动 Android 服务

    根据标准 Android 文档 启动服务 即启动服务 的首选方法是使用如下所示的显式意图 Using explicit intent Intent serviceIntent new Intent getApplicationContext
  • 如何将 package.json 版本写入我的 WebPack 捆绑包?

    我的 package json 文件包含我的模块的版本 该版本最终被编译到我包含在我的 Web 项目中的 app bundle js 文件中 我真的很想将 package json 文件中的版本号写入 app bundle js 文件 作为
  • 按创建日期对 glob() 进行排序 [重复]

    这个问题在这里已经有答案了 我在用 foreach glob config pages php as page 获取目录中所有文件的列表config pages 我可以先显示最旧的文件 最后显示最新的文件吗 我想用所有这些制作一个导航菜单
  • 发送聊天消息

    我有这个代码 var msg new ChatMessage msg Body Test msg Recipients Add number var cms await ChatMessageManager RequestStoreAsyn
  • 使用基类作为 WCF 服务的参数

    我有一个多项目解决方案 一个项目提供一个包含多个类的 DLL 其中一门课是WorkerTemplate 另外两个类继承自它 即ExecSQLWorker and CopyWorker class ExecSQLWorker WorkerTe
  • 无服务器:在 ubuntu 16.04 中找不到命令

    我正在尝试在 Ubuntu 16 04 LTS 中设置 AWS Serverless 框架 我安装了 Node js 并且还使用以下命令安装了 Serverless npm install g serverless在终端中 但当我尝试跑步时
  • PowerShell ForEach / 管道混乱

    我正在 PowerShell 中使用 TFS PowerTools Cmdlet 尝试从我的服务器获取有关变更集和相关工作项的一些信息 我已将问题归结为我不理解的行为 我希望它不是 TFS 特定的 所以那里的人可能能够向我解释问题 这是我可
  • C# 中的内部类

    直到最近我才知道普通类和内部类 子类之间有区别 内部类的实例与其包含类的实例之间有什么关系 内部类的目的是什么以及它们有何不同 与 Java 不同 C 包含的类是嵌套的 包含类实例和被包含类实例之间没有关系 包含类仅在 C 中用于控制包含类
  • 使用 Jackson 根据 API 版本指定不同的 JSON 属性名称

    我需要能够使用 Jackson 序列化 反序列化对象同时支持多个 API 版本 我探索过以下解决方案 JsonProperty 属性命名策略 混合注解 然而 每一个都会导致自己的问题 如果我可以直接在注释中添加具有正确名称的多个版本 Jso
  • 编译/链接过程如何进行?

    编译和链接过程如何进行 Note This is meant to be an entry to Stack Overflow s C FAQ https stackoverflow com questions tagged c faq I
  • JCombobox箭头消失

    当在未放置在构造函数中的方法中填充组合框时 组合框的箭头消失 我尝试使用invokeLater方法 但它不起作用 private void fillProduct this VALID FOR PRODUCT removeAllItems
  • 内联块元素似乎毫无理由地断行?

    我有一些非常基本的 HTML CSS 但没有按我的预期工作 基本上我的身体设置为 400 像素宽 然后 我在 body 内有两个 div 其显式宽度分别为 300px 和 100px 此外 这两个 div 都设置为display inlin
  • 如何用SDL 2.0画正方形?

    我想做一些简单的事情 比如使用 C 和 SDL 在屏幕上画一个正方形 我复制的例子不起作用 Get window surface SDL Surface screenSurface SDL GetWindowSurface window F
  • 使用 Scikit learn 时出现 ValueError。模型的特征数量与输入的特征数量不匹配

    我正在使用 RandomForestClassifier 解决分类问题 在代码中 我将数据集拆分为训练数据和测试数据以进行预测 这是代码 from sklearn ensemble import RandomForestClassifier
  • 我们如何在sql server中选择前20%和后80%的记录

    我正在尝试选择表中前 20 的排序结果以及剩余的 后 80 结果 当我做 select top 20 percent from table 1 然后 select top 80 percent from table 1 order by d
  • R 中的 Grep 查找具有自定义“扩展”边界的单词

    我正在寻找一个正则表达式来 grep 整个单词 包括用数字或下划线分隔的单词 b将数字和下划线视为单词的一部分 而不是边界 例如 我想在 DOG MOUSE CAT DOG MOUSE CAT 中以及 DOG MOUSE9CAT 中以及表达
  • 添加 CHECK 以对多个表施加约束

    我想修改以下 DDL 以添加 CHECK 约束 以便商店的经理在同一家商店工作 并且商店提供所有产品 如果其类型为 本地 有人可以帮忙吗 CREATE TABLE employee employee number CHAR 5 NOT NU
  • 禁用表单提交按钮

    我有一个按钮 我想在提交表单时禁用该按钮 以防止用户多次提交 我曾尝试天真地使用 javascript onclick 禁用该按钮 但如果客户端验证失败 该按钮仍保持禁用状态 如何在表单成功提交时而不只是在用户单击时禁用该按钮 这是一个 A
  • 哪种方式更好地创建 vue 组件(导出默认值、defineComponent 和新 Vue)

    最近学习 Vue js 后 我对如何编写 vue 组件语法感到非常困惑 我一直在看 YouTube 教程和文章 每个人都使用不同的方法 就 vue 3 而言 我们应该使用 导出默认值以创建组件 或导出默认的defineComponent 或