Vue中注册全局组件的三种方式

最新推荐文章于 2024-08-06 14:33:44 发布
最新推荐文章于 2024-08-06 14:33:44 发布
阅读量1.1w 收藏 5
点赞数
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kratial/article/details/82052182
版权

1.方式一

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue组件的注册</title>
    <script src="../vue.js"></script>
</head>
<body>
<template id="Mydemo">
    <h1>Hello Time</h1>
</template>
<div id="app">
    <account></account>
</div>
<script>
//注册全局组件
    Vue.component('account',{
        template:"#Mydemo",
    })
    new Vue({
        el:"#app",
    })
</script>
</body>
</html>

2.方式二

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue组件的注册</title>
    <script src="../vue.js"></script>
</head>
<body>
<div id="app">
    <say-hello></say-hello>
</div>
<script>
  //注册全局组件
    Vue.component('say-hello',{
        template:"<h2>Hello everyone</h2>",
    });
   //根实例
    new Vue({
        el:"#app",
    })
</script>
</body>
</html>

3.方式三：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue组件的注册</title>
    <script src="../vue.js"></script>
</head>
<body>
<div id="app">
  <my-list></my-list>
</div>
<script>
    var list=Vue.extend({
        template:'<h1>this is a list</h1>',
    });
    Vue.component("my-list",list);
    //根实例
    new Vue({
        el:"#app",
    })
</script>
</body>
</html>
Kratial
关注
专栏目录
Vue中注册全局组件的方式
m0_57712926的博客
08-17 1117
目录前言一、为什么要封装全局组件？二、如何封装全局组件1.方法一代码演示2.方式二思路代码演示优点总结 前言 一、为什么要封装全局组件？ 项目中需要多次使用，进行一次封装，全局使用。迎合了es6的模块化开发思想。 二、如何封装全局组件 为了统一管理全局组件，建议将封装的全局组件都写在src根目录下一个专门的文件夹中，比如src/components。 注：示例中xxx、文件夹名和.vue结尾的文件的名字均可以可以自定义。 1.方法一 代码演示 代码如下（示例）： 在src/components文件夹
vue注册全局组件的方法
qq_33911541的博客
01-18 933
vue注册全局组件的方法
Vue3 全局注册组件和指令
最新发布
cnzzs的博客
08-06 868
一、app.component全局注册组件1.1、自定义一个组件登录后复制 <template> <div> <h2>hello, world!</h2> </div> </template> <script setup l...
Vue注册组件的3种方式
热门推荐
sinat_38832964的博客
05-30 3万+
第一种方式 extend: vue.js中这样写： var com1 = Vue.extend({ template:'<h3>这是第一种方式</h3>' }); Vue.component("myCom1",com1); 注：myCom1是采用的驼峰命名方式，所以html中这样写： <my-com1></my-com1> 注：如果不采用驼...
Vue组件-注册组件的三种方式
好记性不如烂键盘
09-22 1093
Vue组件 注册组件的三种方法 1.使用Vue.extend方法 2.不使用extend方法 3.使用template方法 不管使用那种方法template属性只有一个 <div id="app"> <my-component></my-component> <my-component2></my-component2> <my-component3></my-component3> <my-c
vue注册组件的几种方式
qq_16096239的博客
10-08 1128
1，全局注册 Vue.component("组件名",{ template:'组件内容' }) （组件内容可以是模板的Id） 2，局部注册 var child={ template:'组件内容' } new Vue({ el:'#app' data:{ msg:'我是默认内容' }, component:child }) （仅在该实例中可以用） 3，局部注册 ...
Vue学习日记2——组件注册的三种方式
junior_programmer的博客
05-12 333
本文使用直接在html中引用vue.js的方式测试组件注册方法。 新建test.html文件，作为测试代码源文件。 将vue.js放入test.html相同的目录，然后编写如下代码。 <!DOCTYPE html> <html> <script src="vue.js"></script> <h1>vue learn &am...
VUE注册全局组件和局部组件过程解析
10-16
全局组件是指在整个Vue应用中都可以直接使用的组件，它不需要在父组件或模板中额外注册。而局部组件，则仅限于在注册它的组件内使用。 ### 全局组件的注册过程 全局组件注册主要包含三个步骤： 1. 创建组件文件：...
Vue 实现创建全局组件,并且使用Vue.use() 载入方式
10-14
在Vue.js框架中，创建全局组件是提高代码复用性和简化项目结构的一种有效方式。当一个组件在多个地方被频繁使用时，将其封装为全局组件可以避免在每个使用它的组件中重复导入。Vue.use()方法则常用于安装自定义插件...
使用use注册Vue全局组件和全局指令的方法
08-27
`Vue.use()`方法提供了一种简洁的方式来进行批量注册，避免了在主应用文件（如`app.js`）中引入过多的代码，从而使代码结构更加清晰。 **全局组件的注册** 全局组件是指可以在应用程序的任何地方被引用的组件。Vue...
Vue全局组件注册
qq_39070574的博客
06-29 301
Vue全局注册爬坑之路 最近编写项目中，会应用到很多基础组件，起初采用了局部注册进行使用，但局部注册对于开发人员并不友好，每个阶段都要经历import文件导入，component文件注册两个阶段，开发效率不高，于是采用了全局注册方式，引用基础组件，但全局组件会在初次渲染的时候一次性导入，造成系统比较卡顿。于是，想到Vue的另一种思维，按需引入，懒加载模式,或许会解决这一问题。 代码示例如下 export default (Vue) => { Vue.component("component",()
vue组件全局注册
weixin_45580774的博客
06-28 653
描述： vue组件的注册分为局部和全局注册两部分，局部注册相对容易，不做赘述；而不同框架的注册方法又有所不同，下面针对vite框架和vue-cli框架的注册分别进行说明。
vue 全局注册
jiegeng2233的博客
04-09 283
当你注册完之后，可以在任何组件中直接使用，而不需要在各个组件中引入并局部注册 通常公共组件放在src文件夹下的components文件夹中，这里的组件进行全局注册。 * 全局组件 1、在src文件夹中新建utils文件夹，utils文件夹中一般存放通用的辅助文件(方法、数据等) 2、在文件夹中新建components.js文件 3、在components.js文件引入所有要注册的全...
vue注册组件的方法
qq_45228255的博客
05-01 1111
vue注册组件的公共方法
Vue 注册全局组件
人生如梦
04-26 469
vue 注册全局组件 import Vue from 'vue' import upperFirst from 'lodash/upperFirst' import camelCase from 'lodash/camelCase' const requireComponent = require.context( // 其组件目录的相对路径 './components', // 是...
vue 注册全局组件
weixin_46016926的博客
12-14 85
【代码】vue注册全局组件。
vue如何注册全局组件
03-29
要在Vue中注册全局组件，可以使用Vue.component()方法。该方法接收两个参数：组件的名称和组件的选项对象。以下是一个示例： ``` // 定义组件 Vue.component('my-component', { template: '<div>这是一个全局组件</div>' }) // 在Vue实例中使用该组件 new Vue({ el: '#app', template: '<my-component></my-component>' }) ``` 在这个示例中，我们定义了一个名为“my-component”的全局组件，并在Vue实例中使用它。 可以在任何Vue实例的模板中使用全局组件，例如： ``` <div id="app"> <my-component></my-component> </div> ``` 在这个示例中，我们将“my-component”组件添加到Vue实例的模板中。Vue将自动识别该组件并将其呈现到页面上。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值