vue自定义组件(通过Vue.use()来使用)即install的使用
在vue项目中,我们可以自定义组件,像element-ui一样使用Vue.use()方法来使用,具体实现方法:
1.首先新建一个loading.vue文件
// Cmponent.vue
<template>
<div>
...loading
</div>
</template> <script>
export default { }
</script> <style scoped>
div{
font-size:40px;
color:#fbb;
text-align:center;
}
</style>
其次在同一目录下建立index.js文件,在这个文件中使用install方法来全局注册该组件
import LoadingComponent from './loading.vue'
const loading= {
install:function(Vue){
Vue.component('LoadingComponent',component)
} //'component-name'这就是后面可以使用的组件的名字,install是默认的一个方法 } export default Loading
3.在main.js里面引入
import Loading from './compontents/loading' vue.use(Loading); new Vue({
el:'#app',
render:h=>h(App)
})
4.使用
最后你可以在任何想用这个组件的地方插入<Loading></Loading>了 组件相应的样式和js代码可以直接写在第一步中的文件之中!就这样一个自己创建的组件就这么愉快的应用啦!
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.首先新建一个Cmponent.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来修改值相比,这种方式避免操作子组件的同时再操作父组件,显得子组件 ...
随机推荐
- php内置函数分析之array_sum()
PHP_FUNCTION(array_sum) { zval *input, *entry, entry_n; if (zend_parse_parameters(ZEND_NUM_ARGS(), & ...
- Azure IoT 技术研究系列4
上两篇博文中,我们介绍了将设备注册到Azure IoT Hub,设备到云.云到设备之间的通信: Azure IoT 技术研究系列2-设备注册到Azure IoT Hub Azure IoT 技术研究系 ...
- Django【第22篇】:基于Ajax实现的登录
基于ajax实现的登录 一.需要知道的新知识点 1.刷新验证码.给src属性加一个?号.加个?会重新去请求 //#给验证码刷新 $(".vialdCode_img").click( ...
- AGC007题解
发现自己思维能力又跟不上了...做题有点吃力...所以回归AGC刷题计划... AGC040506都写了一部分题然后懒得补全了,所以从07开始做吧.大概是从C开始. C 这也太人类智慧了吧... 我先 ...
- vue-cli3.0配置
仅在项目根目录中新建vue.config.js文件即可,部分配置如下 module.exports = { // 基本路径 baseUrl: '/', // 输出文件目录 outputDir: 'di ...
- 【leetcode】Smallest Rotation with Highest Score
题目如下: Given an array A, we may rotate it by a non-negative integer K so that the array becomes A[K], ...
- 岭回归、lasso
参考:https://blog.csdn.net/Byron309/article/details/77716127 ---- https://blog.csdn.net/xbinwor ...
- LTE抛弃了CDMA?
原文链接:https://blog.csdn.net/readhere/article/details/82764919 本文节选自<LTE教程:结构与实施> 大家都听说过这样的说法:LT ...
- Bugku 杂项 眼见非实(ISCCCTF)
眼见非实(ISCCCTF) 下载文件后,用winhex打开 发现文件头为50 4B 03 04说明是一个压缩文件,还可以看到其中有.docx文件 更改文件后缀为 .zip 解压后发现 这个文件用wor ...
- 【bzoj3162】独钓寒江雪
*题目描述: *题解: 树哈希+组合数学.对于树的形态相同的子树就一起考虑. *代码: #include <cstdio> #include <cstring> #includ ...