全局组件注册install的方式

最新推荐文章于 2022-08-11 11:49:57 发布
最新推荐文章于 2022-08-11 11:49:57 发布
阅读量758 收藏 2
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41430522/article/details/114856525
版权

组件注册有全局和局部,全局通过Vue.component(这个component要小写c,大写报错,不过我好像一直记得是大写啊...),局部通过components

install就是通过Vue.component,比较方便的全局注册组件,就不用一个个在main.js里引入

其中看右边紫色框里,有几个重要的地方,看注释

这里是第一种install的方式,就是直接导出一个install,然后main.js里引入

 

接下来看第二种

和第一种的唯一区别是用了forEach.......... 顺带一提,定义组建的时候写name是个好习惯,如图我循环的时候,不用自己再取每个组件的名字了,直接取组件里的name就好了

然后创建组件的时候,我还是觉得直接大驼峰命名法舒服,然后属性和方法用小驼峰

关于vue.use的作用  https://www.jianshu.com/p/f4682507d425

 

 

烟雨浥轻尘
关注
vue中自定义组件，.install的使用
swx999的博客
01-04 2351
vue中.install方法的使用如同vue.use（），具体如下： 1、新建一个ceshi.vue文件 <template> <div> 我是组件 </div> </template> <script> export default { } </script> <style scoped> div{ width:20px; h
Vue 全局组件注册两种方法 component 与use
留着鼻涕敲代码
10-21 6123
1.component 定义全局组件 在main.js 文件中映入组件并全局注册组件 格式： Vue.component(‘组件名’， 组件对象) 基本示例-定义全局组件: import Vue from 'vue' // 主要的Vue //import 自定义组件名 from '组件地址' import PageTools from '@/components/PageTools' // 导入需要注册的组件 Vue.component('PageTools', PageTools) // 全局注册组件
vue自定义组件(通过Vue.use()来使用)即install的使用
热门推荐
挥别了青春的博客
07-12 3万+
在vue项目中，我们可以自定义组件，像element-ui一样使用Vue.use（）方法来使用，具体实现方法： 1.首先新建一个Cmponent.vue文件 // Cmponent.vue &lt;template&gt; &lt;div&gt; 我是组件 &lt;/div&gt; &lt;/template&gt; &lt;script&gt; e...
Vue全局组件之install/use
qiyuancoder的博客
11-03 1965
在vue项目里的main.js里，往往会见到vue.use(xx)的写法，比如司空见惯的路由模块： import VueRouter from 'vue-router' Vue.use(VueRouter) 其实路由也就是vue的一个插件，这里被use进来，便成了一个全局组件，全局组件可以在任何地方不需要import而直接使用。 相关知识点：用 install(){ } 和 vue.use() 配合来开发和引入全局组件，在 install(){ } 中vue.component(‘name’, compo
vue install 注册全局组件
木槿之夏
07-19 1万+
项目中的有些组件使用的频率比较高，这时候我们可以注册全局的组件，这样就不用每次使用的组件的时候一次次的导入 具体使用的步骤如下 一般会把这个常用的组件在main.js文件中注册好 1.首先先建立一个公用的组件 // Cmponent.vue 公用的组件 <template> <div> 我是组件 </div> </templ...
Vue 实现创建全局组件,并且使用Vue.use() 载入方式
10-14
这里，`Vue.use(loading)`会调用`loading`对象的`install`方法，将`turns`组件注册为全局组件。 5. **全局使用组件**： - 在任何需要使用`turns`组件的Vue组件模板中，可以直接使用组件名称，无需再次导入。 ``...
taro-inject-component-loader:为 Taro React 小程序注入全局组件
05-21
Taro React 小程序注入全局组件 缘由 众所周知，小程序中不能定义全局组件，如果我们想自定义一个 modal 弹窗，来替代 wx.showModal 的话，则需要在每个页面手动的引入组件。随着项目越来越大，手动引入组件无疑是...
Vue触发式全局组件构建的方法
10-17
触发式全局组件构建是处理组件全局注册的另一种方式，它在需要时才加载和注册组件，从而提高效率并降低冗余。本文将详细介绍如何通过触发式方法构建Vue全局组件，为开发者提供一种灵活且高效的组件管理方式。 ### ...
Vue中自定义全局组件的实现方法
10-18
在这个方法内部，你可以使用`Vue.component()`来注册组件，使其成为全局组件。 ```js // sidebar.js import sideblockComponent from './sideBlockComponent'; const defaultComponentName = 'sidebar'; const ...
Vue中注册全局组件的方式
m0_57712926的博客
08-17 1116
目录前言一、为什么要封装全局组件？二、如何封装全局组件1.方法一代码演示2.方式二思路代码演示优点总结 前言 一、为什么要封装全局组件？ 项目中需要多次使用，进行一次封装，全局使用。迎合了es6的模块化开发思想。 二、如何封装全局组件 为了统一管理全局组件，建议将封装的全局组件都写在src根目录下一个专门的文件夹中，比如src/components。 注：示例中xxx、文件夹名和.vue结尾的文件的名字均可以可以自定义。 1.方法一 代码演示 代码如下（示例）： 在src/components文件夹
Vue自定义全局组件install的实现
weixin_42254598的博客
12-01 1928
这里写自定义目录标题Vue自定义全局组件install的实现 Vue自定义全局组件install的实现 在一些Vue的开源组件中我们常常会看到一个install()方法来注册全局组件，而它的实现方式其实是非常简单的。 1.首先建立一个公用的组件。 // Cmponent.vue 公用的组件 <template> <div>我是组件</div> </template> <script> export default { na
npm install 全局安装和本地安装的区别
心魂的博客
10-10 990
npm的包安装分为本地安装（local）、全局安装（global）两种，从敲的命令行来看，差别只是有没有-g而已，比如: npm install grunt #本地安装 npm install -g grunt-cli #全局安装 下面分别说明： 1. npm install xxx -g 时， 模块将被下载安装到【全局目录】中。 【全局目录】通过 npm config
vue 如何把封装的组件以install 的方式提供给组员
qq_40259123的博客
03-25 1770
1. 创建packages文件夹（与src同级） 2. 把组件我们封装的组件移入到packages文件夹里面，并在文件内创建index.js 文件 由于我这边有icon 样式，所以把样式表也要放进去 3.在packages文件下index.js文件中对封装组件进行注册。 // 统一导出 // 导入颜色选择器组件 import Button from './button' import Dialog from './dialog' //导入字体图标 import './fonts/font.scss'
vue中extend，mixins，extends，components,install的几个操作
weixin_34227447的博客
07-12 523
前言 你知道extend,mixins,extends，components,install用法吗? 你知道他们的区别吗? 你知道他们的执行顺序嘛? 下面都能找到这些答案. 1.Vue.extend 1.使用vue构造器,创建一个子类,参数是包含组件选项的对象; 2.是全局的 // 创建构造器 var Profile = Vue.extend({ template: '<p>{...
Vue 注册组件，抽离 withInstall 方法
qq_36437172的博客
08-11 3396
在组件中，我们通常需要使用 Vue.component 去注册组件后才能使用。最后，我们引入 withInstall 方法，组件注册方法变得更简洁了。
vue 自定义组件，通过vue.use来使用，install的使用
ilovexiaoming1的博客
04-21 850
vue 自定义组件，类似引入elementUI的方法，通过vue.use(ElementUI)来使用 第一步：定义一个组件components/star/index.vue <template> <div> <span v-for="item in 5" :key="item" :class="item <= scoreNumber ? 'icon-star-full':'icon-star-empty'" @click="setScore
vue install全局注册组件和局部注册组件
最新发布
05-26
在 Vue 中，我们可以通过全局注册和局部注册两种方式来注册组件。 全局注册组件： ``` // main.js import Vue from 'vue' import App from './App.vue' import MyComponent from './MyComponent.vue' Vue.component('my-component', MyComponent) new Vue({ render: h => h(App), }).$mount('#app') ``` 在上面的代码中，我们使用了 `Vue.component` 方法来进行全局组件的注册，第一个参数是组件的名称，第二个参数是组件的定义。 然后在 `App.vue` 中可以直接使用 `<my-component></my-component>` 来引入这个组件。 局部注册组件： ``` // App.vue <template> <div> <my-component></my-component> </div> </template> <script> import MyComponent from './MyComponent.vue' export default { name: 'App', components: { 'my-component': MyComponent } } </script> ``` 在上面的代码中，我们在组件的定义对象中使用了 `components` 属性来进行局部组件的注册，属性名为组件的名称，属性值为组件的定义。 请注意，全局注册会让你的代码变得更为简洁，但是在大型应用中会显得臃肿。因此，如果组件只在某个组件内部使用，我们应该使用局部注册。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值