Vue3---组件注册(全局组件、局部组件)

Love The Way You Lie 2023-01-20 08:11 806阅读 0赞

*  **全局组件通过 app.component()  方式注册**

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54yO56CB5aOr_size_20_color_FFFFFF_t_70_g_se_x_16][]

import { createApp } from 'vue'
    import App from './App.vue'
    import router from './router'
    import commonTit from './components/commonTit.vue'
    
    const app = createApp(App)
    app.use(router)
    app.mount('#app')
    app.component('commonTit', commonTit) // 注册全局组件

<template>
      <div id="about">
        <commonTit :tit="'猎码士'" />
      </div>
    </template>

*  局部组件，通过 defineAsyncComponent 导入组件，注册后使用。

<template>
      <div class="about">
        <h1>This is an about page</h1>
        <HelloWorld />
      </div>
    </template>
    <script>
    import { defineComponent, defineAsyncComponent } from 'vue'
    export default defineComponent({
      name: 'About',
      components: {
        HelloWorld: defineAsyncComponent(() => import('@/components/HelloWorld'))
      }
    })
    </script>

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54yO56CB5aOr_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20221021/5fb6207c37ce45b7a02e38c4136771bd.png

发表评论取消回复

表情：

评论列表（有 0 条评论，806人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue局部注册组件实现组件化登录注册

Vue局部注册组件实现组件化登录注册一、效果二、代码 1、index.js 2、App.vue 3、首页

痛定思痛。/ 2024年04月06日 15:28/ 0 赞/ 18 阅读

相关 Vue全局组件与局部组件

全局注册组件，组件在注册之后可以用在任何新创建的 Vue 根实例的模板中使用，局部注册的组件只能在指定父组件下使用，作用域小。 <template> <d

Myth丶恋晨/ 2023年08月17日 16:00/ 0 赞/ 59 阅读

相关 Vue3---组件注册(全局组件、局部组件)

全局组件通过 app.component() 方式注册 ![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_

Love The Way You Lie/ 2023年01月20日 08:11/ 0 赞/ 807 阅读

相关 vue注册组件跟注册局部组件

vue注册组件跟注册局部组件 > 由于以前都是用脚手架写的项目，因此常常忽略了这一点，由于最近入驻的公司是关于直播广告活动的，因此都是基于vue.js写出的项目，废话不多

红太狼/ 2022年11月09日 14:22/ 0 赞/ 150 阅读

相关 vue的执行顺序(局部组件和全局组件)

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbGl1bGFuZzY4_

短命女/ 2022年09月10日 09:27/ 0 赞/ 160 阅读

相关全局组件和局部组件

<!DOCTYPE html> <html> <head> <title></title> <script type="text/j

曾经终败给现在/ 2022年06月02日 10:23/ 0 赞/ 181 阅读

相关 Vue框架整理：全局组件、局部组件、特殊组件创建方法

![这里写图片描述][70] vue的组件也是需要注册后才可以使用的，注册有全局注册和局部注册两种；全局组件注册后，任何vue实例都可以用： <div id=

小咪咪/ 2022年05月22日 09:10/ 0 赞/ 225 阅读

相关 Vue注册全局组件-弹窗组件

在src目录下新建components文件夹 1.新建module文件夹，然后新建v-alert.vue <template> <transition

短命女/ 2022年05月14日 00:52/ 0 赞/ 210 阅读

相关组件-局部注册

选项/资源 Components，包含 Vue 实例可用组件的哈希表。类型是object 在这些情况下，你可以通过一个普通的 JavaScript 对象来定义组件： <ta

男娘i/ 2022年03月30日 10:20/ 0 赞/ 201 阅读

相关 Vue.js--组件注册（全局注册、局部注册）、表行组件、组件中的data、组件数据的共享问题详解

组件组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。组件系统让我们可以用独立可复用的小组件来构建大型应用，

我就是我/ 2021年08月13日 23:19/ 0 赞/ 400 阅读