Vue 3 - 如何将组件和混入与根组件一起包含?

2024-04-20

我尝试将语法从 Vue 2 转换为 Vue 3,但我不确定如何包含mixins and 成分,如果您在 Vue 2 中看到以下代码:

import App from "./App.vue";

const app = new Vue({
  mixins: [globalMixin],
  router,
  el: '#app', 
  store,
  components: {
     Thing,
       Hello
  }, 
  render: h => h(App)
});

如果我理解正确的话,这是 Vue 3 语法:

const app = createApp(App)
app 
.use(store)
.use(router) 
 
app.mount('#app')

vue 2 示例有一个 mixin 和两个组件,但如何将其添加到 Vue 3 语法中? 您可以通过执行以下操作来添加组件:app.component('Thing', Thing)但这只是一个组件......我应该以这种方式将它们一一添加吗?那么 mixin 呢?


在Vue 3中,您可以使用应用程序API mixin方法。

import { createApp } from 'vue'
import App from './App.vue'
import globalMixin from './globalMixin'

const app = createApp(App)

app.mixin(globalMixin)

app.mount('#app')

对于组件,可以一一添加。我更喜欢这种方式,因为它更干净。

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

Vue 3 - 如何将组件和混入与根组件一起包含? 的相关文章

随机推荐

  • Oracle 中的第 N 个最高薪水

    为了找出oracle中的第N个最大sal 我使用下面的查询 SELECT DISTINCE sal FROM emp a WHERE SELECT COUNT DISTINCE sal FROM emp b WHERE a sal lt b
  • `$eq` 运算符是否适用于数组点表示法?

    我正在尝试编写一个聚合查询 expr inside lookup s match管道阶段 我发现了一些与数组点表示法相关的问题 想象一个集合relations数组字段称为nodes 以下查询可以正常返回正确的结果 db relations
  • 预防孤儿

    我试图通过在段落和标题内的最后两个单词之间添加不间断空格来防止出现单个单词孤儿 然而 我正在使用的脚本也有删除链接的副作用 p h1 h2 h3 h4 h5 h6 each function var wordArray this text
  • 一个模拟键盘按下的程序

    我是编程新手 我想编写一个程序 仅供自用 每次运行时都会重复一组预设的键盘操作 有人可以给我一些建议吗 是否有任何应用程序可以做到这一点 有各种各样的程序可以满足您的需求 如果你在 Windows 上 自动热键 http www autoh
  • jmeter恒定视频流

    我正在使用 Jmeter 来加载测试视频流 我可以传递登录信息 但我需要让 Jmeter 在提供视频流的页面上 保持 我怎样才能做到这一点 我已经设置了 cookie 管理器 如果视频流不在您的服务器上 您根本不需要测试它 例如 如果您的网
  • 本地化系统生成的隐私警报消息 iOS UIAlertView Xcode

    我正在使用 Xcode Swift 1 1 开发一个应用程序 并使用 iOS 7 1 和 iOS 8 1 模拟器对其进行测试 该应用程序允许用户访问他们的照片库 但在此之前 iOS 会显示隐私警报消息标题 以英语请求用户许可 App Nam
  • 使用 SearchView android studio 工具栏中的左侧空间

    我正在尝试添加一个简单的SearchView到我的应用程序中的工具栏 除了布局之外 一切都工作正常 之间有这个 空间 NavigationDrawer图标和SearchView 如果我设置了标题 则空间将填充该字符串 否则为空 空字符串 标
  • 简化平面数组或多维数组的循环

    通常 我会有一个数组来保存一组值 每个值我都需要处理 有时 数组仅保存单个集合 在这种情况下 每个值都需要经过该过程 其他时候 数组将保存许多集合 在这种情况下 每个值都将是一个数组 并且这些数组中的每个值都需要进行处理 这是一个例子 fo
  • 使用 MVVM 动态添加时给予 TabItem 焦点

    所有 我添加一个TabItem to a TabControl动态地使用 MVVM 新的TabItems加载良好 但我希望添加的选项卡自动获得焦点 也就是说 我添加了一个选项卡 但我不想必须单击该选项卡才能获得焦点 XAML 的TabCon
  • 如何将 CSS 样式仅应用于文本

    我正在尝试将样式应用于 HTML 文本之类的内容 我想要的基本上是 我得到的基本上是 正如您所看到的 第一行是缩进的 但其他行没有缩进 到目前为止 我已经将文本包含在 span 它嵌套在一个 div slide text text back
  • 作为 Windows 服务运行时,.Net Core 6 Worker Service 不写入日志

    我使用 C Net Core 6 Visual Studio 2022 创建了一个辅助服务 如果通过 Visual Studio 运行或直接从 Windows 资源管理器 PowerShell 启动 它会按预期写入日志文件 但是 当作为 W
  • 如何强制子进程刷新标准输出缓冲区?

    平台 Windows 8 1 IDE vs2013 使用c c 进程 A 使用管道重定向读取子进程的标准输出 但子进程不会在 printf 之后调用 fflush 以在子进程运行结束之前处理 A 无法从管道读取任何内容 ps 我有子进程的源
  • 具有可定制内容的 JSF 迭代复合组件

    我想创建一个复合组件 可以将迭代元素的实际布局传递给复合组件 这是一个简化的示例并且有效
  • 如何访问分区 Athena 表的子目录中的数据

    我有一个 Athena 表 每天都有一个分区 其中实际文件按小时位于 子目录 中 如下所示 s3 my bucket data 2019 06 27 00 00001 json s3 my bucket data 2019 06 27 00
  • python中字典列表中的top-k

    有没有一种简单的方法来执行此示例中的最大 k 个键 值对 s1 val 0 s2 val 10 s3 val 5 s4 val 4 s5 val 6 s6 val 7 s7 val 3 shapelets s1 s2 s3 s4 s5 s6
  • 如何通过光标url缩小图像的大小?

    我有一张尺寸为 105x105 的图像 我使用以下 CSS 脚本将其用作光标 class 1 child 1 cursor url theBell png 20 20 auto 当我将鼠标移到元素上时会出现图像 但它太大了 我不知道如何减小
  • 在 C# 中动态更改命名空间

    我想做这样的事情 如果定义了 DEBUG 则命名空间为 Test 或者命名空间为 TestB 请参阅下面的示例代码 我可以这样做吗 或者您有更好的想法来实现这一目标吗 提前致谢 if DEBUG SomekindofAttribute Na
  • 使用 Turbolinks 渲染同一页面时无法使用 Flash

    我试图在点击更新端点后显示闪存消息 我想让用户保持在同一页面上并告诉他信息已更新 我启用了 Turbolink 我的操作如下 def update form Form find params id if form update form p
  • “提供程序包”未正确加载

    VS 2013 专业版 版本 12 0 31101 00 更新 4 突然间 每当我尝试打开一个项目 MVC 项目或 Python 项目 时 我都会得到 ProviderPackage 包未正确加载 问题 可能是由配置更改或安装引起的 另一个
  • Vue 3 - 如何将组件和混入与根组件一起包含?

    我尝试将语法从 Vue 2 转换为 Vue 3 但我不确定如何包含mixins and 成分 如果您在 Vue 2 中看到以下代码 import App from App vue const app new Vue mixins globa