草庐IT

javascript - 全局注册vue组件

coder 2024-05-09 原文

我有一个使用 vue-cli 创建的 vue 应用

我正在创建一些组件，我想像这样使用它们:

<template>
    <oi-list>
        <oi-list-header>Task ID</oi-list-header>
        <oi-list-header>Tasks Title</oi-list-header> 
        <oi-list-header>Task Status</oi-list-header> 
        <div v-for="task in tasks">
            <oi-list-item>{{ task.id }}</oi-list-item>
            <oi-list-item>{{ task.title }}</oi-list-item>
            <oi-list-item>{{ task.status }}</oi-list-item>
        </div>
    </oi-list>
</tempalte>

我遇到的问题是，无论在哪里使用列表组件，我都必须编写以下内容:

<script>
    import List from '@/components/List'
    import ListHeader from '@/components/ListHeader'
    import ListItem from '@/components/ListItem'

    export default {
    name: "Tasks",
    components: {
        'oi-list': List,
        'oi-list-header': ListHeader,
        'oi-list-item': ListItem
    }
<script>

我希望可重用组件在全局范围内注册，这样我就不必在每次使用它们时都导入它们及其子组件，或者在我使用它们时如何动态加载它们。这可能吗？

我用过Vuetify过去不需要您导入每个组件即可使用它。

请有人能指出我正确的方向吗？谢谢。

最佳答案

这很容易实现。您可以在 main.js 文件中全局注册组件。

import MyComponent from '@/components/MyComponent'

Vue.component('my-component-name', MyComponent)

现在您可以使用 <my-component-name />无处不在。

一种更简洁的方式，不会使您的 main.js 膨胀, 就是像这样将组件导入到组件文件夹中的 index.js 文件中。

import Vue from 'vue'
import MyComponent from '@/components/MyComponent'

Vue.component('my-component-name', MyComponent)

稍后您可以将此行添加到您的 main.js加载已注册的组件。

import '@/components'

文档:https://v2.vuejs.org/v2/guide/components-registration.html

关于javascript - 全局注册vue组件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52644198/

javascriptvuelistcodecomponentsvuejs2vue-component

有关javascript - 全局注册vue组件的更多相关文章

  1. 计算机毕业设计ssm+vue基本微信小程序的小学生兴趣延时班预约小程序 - 2

    项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明：前端使用微信微信小程序开发工具：后端使用ssm：VU

  2. 阿里云国际版免费试用：如何注册以及注意事项 - 2

    作为新的阿里云用户，您可以50免费试用多种优惠，价值高达1,700美元（或8,500美元）。这将让您了解和体验阿里云平台上提供的一系列产品和服务。如果您以个人身份注册免费试用，您将获得价值1,700美元的优惠。但是，如果您是注册公司，您可以选择企业免费试用，提交基本信息通过企业实名注册验证，即可开始价值$8,500的免费试用！本教程介绍了如何设置您的帐户并使用您的免费试用版。​关于免费试用在我们开始此试用之前，您还必须遵守以下条款和条件才能访问您的免费试用：只有在一年内创建的账户才有资格获得阿里云免费试用。通过此免费试用优惠，用户可以免费试用免费试用活动页面上列出的每种产品一次。如果您有多个帐

  3. ruby-on-rails - 设计注册确认 - 2

    我在我的项目中有一个用户和一个管理员角色。我使用Devise创建了身份验证。在我的管理员角色中，我没有任何确认。在我的用户模型中，我有以下内容:devise:database_authenticatable,:confirmable,:recoverable,:rememberable,:trackable,:validatable,:timeoutable,:registerable#Setupaccessible(orprotected)attributesforyourmodelattr_accessible:email,:username,:prename,:surname,:

  4. ruby - 在 RSpec 中 stub /模拟全局常量 - 2

    我有一个gem，它有一个根据Rails.env的不同行为的方法:defself.envifdefined?(Rails)Rails.envelsif...现在我想编写一个规范来测试这个代码路径。目前我是这样做的:Kernel.const_set(:Rails,nil)Rails.should_receive(:env).and_return('production')...没关系，只是感觉很丑。另一种方法是在spec_helper中声明:moduleRails;end而且效果也很好。但也许有更好的方法？理想情况下，这应该有效:rails=double('Rails')rails.sho

  5. ruby - 将全局 $stdout 重新分配给控制台 - ruby - 2

    我正在尝试将$stdout设置为临时写入一个文件，然后返回到一个文件。test.rb:old_stdout=$stdout$stdout.reopen("mytestfile.out",'w+')puts"thisgoesinmytestfile"$stdout=old_stdoutputs"thisshouldbeontheconsole"$stdout.reopen("mytestfile1.out",'w+')puts"thisgoesinmytestfile1:"$stdout=old_stdoutputs"thisshouldbebackontheconsole"这是输出。r

  6. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  7. ruby - 在模块/类之间共享全局记录器 - 2

    在许多ruby​​类之间共享记录器实例的最佳(正确)方法是什么？现在我只是将记录器创建为全局$logger=Logger.new变量，但我觉得有更好的方法可以在不使用全局变量的情况下执行此操作。如果我有以下内容:moduleFooclassAclassBclassC...classZend在所有类之间共享记录器实例的最佳方式是什么？我是以某种方式在Foo模块中声明/创建记录器还是只是使用全局$logger没问题？ 最佳答案 在模块中添加常量:moduleFooLogger=Logger.newclassAclassBclassC..

  8. ruby - Sinatra 中的全局救援和日志记录异常 - 2

    如何在出现异常时指定全局救援，如果您将Sinatra用于API或应用程序，您将如何处理日志记录？ 最佳答案 404可以在not_found方法的帮助下处理，例如:not_founddo'Sitedoesnotexist.'end500s可以通过调用带有block的错误方法来处理，例如:errordo"Applicationerror.Plstrylater."end错误的详细信息可以通过request.env中的sinatra.error访问，如下所示:errordo'Anerroroccured:'+request.env['si

  9. ruby - 为什么允许在 Ruby 类之外定义全局方法？ - 2

    我读过这个:Let’sstartwithasimpleRubyprogram.We’llwriteamethodthatreturnsacheery,personalizedgreeting.defsay_goodnight(name)result="Goodnight,"+namereturnresultend我的理解是，方法是定义在类中的函数或子程序，可以关联到类(类方法)或对象(实例方法)。那么，如果它不是在类中定义的，怎么可能是方法呢？ 最佳答案 当你在Ruby中以这种方式在全局范围内定义一个函数时，它在技术上变成了Obje

  10. ruby - 在 Mechanize 中使用 JavaScript 单击链接 - 2

    我有这个:AccountSummary我想单击该链接，但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案 那是一个javascript链接。Mechan

随机推荐