vue自定义组件(通过Vue.use()来使用)即install的用法说明
更新时间：2020年08月11日 11:44:20 作者：挥别了青春
这篇文章主要介绍了vue自定义组件(通过Vue.use()来使用)即install的用法说明，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
在vue项目中，我们可以自定义组件，像element-ui一样使用Vue.use（）方法来使用，具体实现方法：
1.首先新建一个Cmponent.vue文件
// Cmponent.vue
<template>
<div>
我是组件
</div>
</template>
<script>
export default {
}
</script>
<style scoped>
div{
font-size:40px;
color:#fbb;
text-align:center;
}
</style>
2.其次在同一目录下建立index.js文件,在这个文件中使用install方法来全局注册该组件
import component from './Cmponent.vue'
const component = {
install:function(Vue){
Vue.component('component-name',component)
} //'component-name'这就是后面可以使用的组件的名字，install是默认的一个方法
}
// 导出该组件
export default component
3.使用
// 只要在index.js里规定了install方法，就可以向其他ui组件库那样，使用Vue.use()来全局使用 import loading from './index.js' Vue.use(loading) <template> <div> <component-name></component-name> </div> </template>
补充知识：如何在vue项目中自定义组件并在其他文件引用?
1.运行环境：
编译器:Visual Studio Code
Vue版本：2.9.6
在vue-cli搭建的项目目录树下
2.自定义vue组件
在src目录下新建一个components目录用于存放自定义组件:
创建存放自定义组建的目录
新建一个vue文件并编写如下内容(以HelloWorld为例):
这里的export default内容体内的name属性值就是自定义的组件名,template标签名内的内容是html标签组成的集合,script标签内是javascript代码定义动态效果,style标签内的内容是组件的css样式
编写语句引入vue组件:
这里的组件引入的语句是import HelloWorld from "@/components/HelloWorld";位于
在vue项目中引入自定义标签<HelloWorld>:
最后的运行效果:
I am Hello World Component
这里就是定义的组件内容
以上这篇vue自定义组件(通过Vue.use()来使用)即install的用法说明就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
本文主要介绍了el-table嵌套el-popover处理卡顿的解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-05-05
这篇文章主要介绍了vue.js 左侧二级菜单显示与隐藏切换的实例代码,需要的朋友可以参考下2017-05-05
AES算法是一种对称加密算法,用于加密和解密数据,下面这篇文章主要给大家介绍了关于Vue项目中实现AES加密解密的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-08-08
JSX是一种Javascript的语法扩展,JSX = Javascript + XML,即在 Javascript里面写XML,因为 JSX 的这个特性,所以他即具备了 Javascript的灵活性,同时又兼具html的语义化和直观性,这篇文章主要给大家介绍了关于Vue中JSX的基本用法及高级部分的相关资料,需要的朋友可以参考下2022-11-11
本篇文章主要介绍了vue中添加mp3音频文件的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-03-03
这篇文章主要为大家详细介绍了Vue+ElementUI使用vue-pdf实现预览功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-11-11
这篇文章主要给大家介绍了关于vue3.0 sfc中setup变化的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2021-10-10
这篇文章主要介绍了如何管理Vue中的缓存页面，帮助大家更好的理解和学习使用vue框架，感兴趣的朋友可以了解下2021-02-02
今天小编就为大家分享一篇vue 实现特定条件下绑定事件，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
今天小编就为大家分享一篇element-ui中的select下拉列表设置默认值方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
最新评论