vue自定义组件(通过Vue.use()来使用)即install的用法说明


Posted in Javascript onAugust 11, 2020

在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自定义组件(通过Vue.use()来使用)即install的用法说明

创建存放自定义组建的目录

新建一个vue文件并编写如下内容(以HelloWorld为例):

vue自定义组件(通过Vue.use()来使用)即install的用法说明

这里的export default内容体内的name属性值就是自定义的组件名,template标签名内的内容是html标签组成的集合,script标签内是javascript代码定义动态效果,style标签内的内容是组件的css样式

编写语句引入vue组件:

vue自定义组件(通过Vue.use()来使用)即install的用法说明

这里的组件引入的语句是import HelloWorld from "@/components/HelloWorld";位于

在vue项目中引入自定义标签<HelloWorld>:

vue自定义组件(通过Vue.use()来使用)即install的用法说明

最后的运行效果:

vue自定义组件(通过Vue.use()来使用)即install的用法说明

I am Hello World Component

这里就是定义的组件内容

以上这篇vue自定义组件(通过Vue.use()来使用)即install的用法说明就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
提高 DHTML 页面性能
Dec 25 Javascript
javascript模仿msgbox提示效果代码
Jun 10 Javascript
jQuery中add实现同时选择两个id对象
Oct 22 Javascript
JQuery学习笔记 nt-child的使用
Jan 17 Javascript
node.js中的fs.open方法使用说明
Dec 17 Javascript
javascript格式化json显示实例分析
Apr 21 Javascript
基于JavaScript实现鼠标悬浮弹出跟随鼠标移动的带箭头的信息层
Jan 18 Javascript
简单理解JavaScript中的封装与继承特性
Mar 19 Javascript
JS 终止执行的实现方法
Nov 24 Javascript
JS扩展String.prototype.format字符串拼接的功能
Mar 09 Javascript
vuejs+element UI点击编辑表格某一行时获取内容填入表单的示例
Oct 31 Javascript
微信小程序wx.getUserInfo授权获取用户信息(头像、昵称)的实现
Aug 19 Javascript
Vue 实现创建全局组件,并且使用Vue.use() 载入方式
Aug 11 #Javascript
Vue自定义全局弹窗组件操作
Aug 11 #Javascript
基于Vue全局组件与局部组件的区别说明
Aug 11 #Javascript
VUE使用 wx-open-launch-app 组件开发微信打开APP功能
Aug 11 #Javascript
vue实现图片按比例缩放问题操作
Aug 11 #Javascript
JavaScript中while循环的基础使用教程
Aug 11 #Javascript
vue-cli3 引入 font-awesome的操作
Aug 11 #Javascript
You might like
PHP连接MongoDB示例代码
2012/09/06 PHP
Gambit vs ForZe BO3 第三场 2.13
2021/03/10 DOTA
js跑马灯代码(自写)
2013/04/17 Javascript
node.js应用后台守护进程管理器Forever安装和使用实例
2014/06/01 Javascript
js实现非常简单的焦点图切换特效实例
2015/05/07 Javascript
js实现点击切换TAB标签实例
2015/08/21 Javascript
jquery实现的Accordion折叠面板效果代码
2015/09/02 Javascript
详解js私有作用域中创建特权方法
2016/01/25 Javascript
JS验证 只能输入小数点,数字,负数的实现方法
2016/10/07 Javascript
移动开发之自适应手机屏幕宽度
2016/11/23 Javascript
jQuery插件FusionWidgets实现的Cylinder图效果示例【附demo源码】
2017/03/23 jQuery
详解ES6中的代理模式——Proxy
2018/01/08 Javascript
vue中实现左右联动的效果
2018/06/22 Javascript
vue服务端渲染操作简单入门实例分析
2019/08/28 Javascript
JS中async/await实现异步调用的方法
2019/08/28 Javascript
微信小程序的引导页实现代码
2020/06/24 Javascript
JavaScript 中的六种循环方法
2021/01/06 Javascript
python中sys.argv函数精简概括
2018/07/08 Python
Numpy之reshape()使用详解
2019/12/26 Python
python实现上传文件到linux指定目录的方法
2020/01/03 Python
浅谈Python描述数据结构之KMP篇
2020/09/06 Python
HTML5实现自带进度条和滑块滑杆效果
2018/04/17 HTML / CSS
新西兰杂志订阅:isubscribe
2019/08/26 全球购物
机电一体化专业应届本科生求职信
2013/09/27 职场文书
施工安全协议书
2013/12/11 职场文书
给老师的道歉信
2014/01/11 职场文书
乡镇党的群众路线教育实践活动剖析材料
2014/10/09 职场文书
职工年度考核评语
2014/12/31 职场文书
预备党员个人总结
2015/02/14 职场文书
未婚证明范本
2015/06/15 职场文书
趣味运动会通讯稿
2015/07/18 职场文书
新学期家长寄语2016
2015/12/03 职场文书
创业计划书之家政服务
2019/09/18 职场文书
Opencv中cv2.floodFill算法的使用
2021/06/18 Python
Oracle 死锁的检测查询及处理
2021/09/25 Oracle
MySQL分区以及建索引的方法总结
2022/04/13 MySQL