[转] 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自定义组件(通过Vue.use()来使用)即install的使用的更多相关文章
- vue自定义组件(vue.use(),install)+全局组件+局部组件
相信大家都用过element-ui.mintui.iview等诸如此类的组件库,具体用法请参考:https://www.cnblogs.com/wangtong111/p/11522520.html ...
- vue自定义组件(通过Vue.use()来使用)即install的使用
在vue项目中,我们可以自定义组件,像element-ui一样使用Vue.use()方法来使用,具体实现方法: 1.首先新建一个loading.vue文件 // Cmponent.vue <te ...
- Vue自定义组件实现v-model指令
Tips: 本文所描述的Vue均默认是Vue2版本 在我们初次接触Vue的时候,一定会了解到一个语法糖,那就是v-model指令,它带给我们的第一印象就是它可以实现双向绑定 那么,什么是双向绑定?通俗 ...
- 如何让vue自定义组件可以包裹内容,并且渲染出来,以及组件的组合使用
当我们用vue一开始写项目时,按需求文档自定义了一个公用组件,这个组件很多地方都用到了,然后随着项目的推进,又有了新的需求要在里面加东西,但又不是所有的地方都要加 这时候我们想这样往里面塞内容↓ ...
- vue 自定义组件销毁
今天在开发电商vue前端项目时,用户每次登出再换其它用户登录时,页面显示的用户名和左则导航都还是上个用户的,刚开始以为是localStorage中没有清除全局数据,然后在用户点击退出系统时手动清除lo ...
- Vue自定义组件插入值
我们自定义组件的时候有时候需要往组件里面插一些内容: //定义一个组件test,插值内容用slog来代替 export default { name: 'test', template:` <d ...
- VUE 自定义组件之间的相互通信
一.自定义组件 1.全局自定义组件 我们在var vm = new Vue({});的上面并列写上Vue.component('自定义组件名',{组件对象});来完成全局自定义组件的声明.示例代码如下 ...
- vue自定义组件并使用
以下是使用自己写的一个简单的文件上传框为例 1.自定义组件结构(一个js文件,一个vue文件),最好单独放一个文件 2.upload.vue 内容 其中,action是父组件传递给子组件的参数,使用p ...
- vue自定义组件中的v-model简单解释
在使用iview框架的时候,经常会看到组件用v-model双向绑定数据,与传统步骤父组件通过props传值子组件,子组件发送$emit来修改值相比,这种方式避免操作子组件的同时再操作父组件,显得子组件 ...
随机推荐
- Kindle官方广告“自封”泡面盖
动点科技获悉:亚马逊出品的电子书阅读器 kindle 在最新投放天猫平台上的 banner 栏醒目位置投放了一组广告,令人大跌眼镜的是图片使用了 kindle 放在一桶泡面上的形式,怕你看不懂用意的官 ...
- nginx 80 端口 部署多个Web
1.修改默认nginx.conf 文件 加入 include /usr/www/ngconfs/*.conf; 读取ngconfs文件下所有 *.conf文件 2.ngconfs 下多个文件创建 第二 ...
- Python 正则表达式使用问题集锦
在正则表达式中,如果直接给出字符,就是精确匹配.用\d可以匹配一个数字,\w可以匹配一个字母或数字,所以: '00\d'可以匹配'007',但无法匹配'00A':而且也无法匹配'1001',效果类似于 ...
- stop()在animate中的用法
stop 是jQuery中用于控制页面动画效果的方法.运行之后立刻结束当前页面上的动画效果.stop在新版jQuery中添加了2个参数:第一个参数的意思是是否清空动画序列,也就是stop的是当前元素的 ...
- 11.4 Flask session,闪现
session 加密后放在用户浏览器的 cookie 中 于django 的自带session 不同,flask 的 session 需要导入 from flask import session 添加 ...
- npm后台启动nuxt服务之 kill
后台启动 npm run start & ps aux | grep start 根据项目对应的id执行如下命令 kill xxxx
- 微信小程序wepy框架开发资源汇总
开源项目 wepy-wechat-demo:基于wepy开发的仿微信聊天界面小程序 深大的树洞:基于wepy开发的树洞类微信小程序 wepy-demo-bookmall:微信小程序
- 【GDOI2016模拟3.15】基因合成(回文串+性质+DP)
[GDOI2016模拟3.15]基因合成 题意: 给一个目标串,要求从空串进行最少的操作次数变成目标串,操作有两种: 在串的头或尾加入一个字符. 把串复制一遍后反向接到串的末尾. 因为有回文操作,所以 ...
- [报错]java.lang.ClassCastException
Caused by: java.lang.ClassCastException: org.apache.xml.dtm.ref.DTMManagerDefault cannot be cast to ...
- Ajax与JSON共同使用的小实例
实现的效果: 点击“点击”按钮,可以通过Ajax从服务器调过来相应的文档文件,而不需重新加载页面. 通过json可以将调过来的文档(String)转换为相应的json对象,从而对文档中数据进行操作. ...