Vue-全局添加组件
2023-09-27 14:28:57 时间
在vue项目中,可以自定义组件像vue-resource一样使用Vue.use()方法来使用,具体实现方法:
1、首先建一个自定义组件的文件夹,比如叫loading,里面有一个index.js,还有一个自定义组件loading.vue,在这个loading.vue里面就是这个组件的具体的内容,比如:
<template>
<div>
loading..............
</div>
</template>
<script>
export default {
}
</script>
<style scoped>
div{
font-size:40px;
color:#f60;
text-align:center;
}
</style>
在index.js中,规定了使用这个组件的名字,以及使用方法,如:
import loadingComponent from './loading.vue'
const loading={
install:function(Vue){
Vue.component('Loading',loadingComponent)
} //'Loading'这就是后面可以使用的组件的名字,install是默认的一个方法
};
export default loading;
只要在index.js中规定了install方法,就可以像一些公共的插件一样使用Vue.use()来使用,如:
import loading from './loading'
Vue.use(loading)
这是在入口文件中引入的方法,可以看到就像vue-resource一样,可以在项目中的任何地方使用自定义的组件了,比如在home.vue中使用
<template>
<div>
<Loading></Loading>
</div>
</template>
这样就可以使用成功
相关文章
- (尚042) vue_缓存路由组件
- 31 Vue组件中Slot插槽的使用1
- 【css/vue】Vue组件中对body操作样式的一种解决方案
- 【Vue】通过【总线bus】方式实现【兄弟组件】之间参数传递(图文+代码示例)
- 理解Vue.nextTick
- Vue Hook Event 解读
- 详解Vue PC端如何实现扫码登录功能
- Vue 表情输入组件,微信face表情组件
- VUE input focus事件阻止冒泡 阻止父元素事件触发
- vue 组件 模板中根数据绑定需要指明路径并通信父
- 基于 Vue BootStrap的迷你Chrome插件
- Vue之mixins理解与应用
- vue-状态管理与Vuex
- Vue---Ant组件---下拉菜单样式
- Vue知识点总结(3)——v-bind(超级详细)
- vue工程化
- vue组件---动态组件之多标签页面
- vue组件---组件注册
- npm安装vue-cli报错internal/modules/cjs/loader.js(Error: Cannot find module 'D:Programnodejsnode_globalnode_modulesvue-clibinvue')
- vue刷新当前路由:router-view 复用组件时不刷新的3种解决方案总结
- 创建vue组件与自定义一个vue组件时的区别
- Vue学习第29天——路由的props配置项的详解与案例(对比组件props配置项)
- vue星级评分组件
- vue 子组件触发父组件方法的两种方式