vue组件(全局,局部,动态加载组件)


Posted in Javascript onSeptember 02, 2018

说说Vue.js组件

什么是组件:组件是Vue.js最强大的功能之一。组件可以扩展HTML元素,封装可重用的代码。在较高层面上,组件是自定义的元素,Vue.js的编译器为它添加特殊功能。在有些情况下,组件也可以是原生HTML元素的形式,以is特性扩展。

vue组件有两种,一种是全局组件,一种是局部组件。整个项目经常用到的用全局写法,用到比较少的专供特定页面用的使用局部组件。

one----全局组件引入写法:在项目的main.js中:

第一种,在main.js直接写template:' 模版字符串'

Vue.component('tab-home', { template: `<div>Home component</div>`
})
Vue.component('tab-posts', { template: `<div>Posts component</div>`
})
Vue.component('tab-archive', { template: `<div>Archive component</div>`
})

第二种,分别写tab-home.vue Tab-Posts'.vue Tab-Archive'.vue然后import TabHome from ‘ Tab-Home.vue '

Vue.use( TabHome); // 自定义全局组件的时候需要Vue.use();
  Vue.component('tab-home', TabHome)); //初始化组件
two ----局部组件引入 ,写在需要的引入的组件,如helloworld
import TabAa from './tab-aa.vue'
import TabBb from './tab-bb.vue'
import TabCc from './tab-cc.vue'
export default {
name: 'HelloWorld',
components:{TabAa,TabBb,TabCc},
three----动态组件(tab切换 使用:is="currentTabComponent")
<template>
<>
<button
v-for="tab in tabs"
v-bind:key="tab"
v-bind:class="['tab-button', { active: currentTab === tab }]"
v-on:click="currentTab = tab"
>{{ tab }}</button>
<component
v-bind:is="currentTabComponent"
class="tab"
></component>
</div>
</template>
export default {
name: 'HelloWorld',
components:{TabAa,TabBb,TabCc},
data () {
return {
currentTab: 'Home',
tabs: ['Home', 'Posts', 'Archive','Aa','Bb','Cc'],
loginType:'username',
msg: 'Welcome to Your Vue.js App'
}
},
computed: {
currentTabComponent: function () {
return 'tab-'+this.currentTab.toLowerCase()
}
},
样式:
.tab-button {
padding: 6px 10px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
border: 1px solid #ccc;
cursor: pointer;
background: #f0f0f0;
margin-bottom: -1px;
margin-right: -1px;
}
.tab-button:hover {
background: #e0e0e0;
}
.tab-button.active {
background: #e0e0e0;
}
.tab {
border: 1px solid #ccc;
padding: 10px;
}

总结

以上所述是小编给大家介绍的vue组件(全局,局部,动态加载组件)实例详解,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
一个JavaScript变量声明的知识点
Oct 28 Javascript
jquery ztree实现下拉树形框使用到了json数据
May 14 Javascript
js完美解决IE6不支持position:fixed的bug
Apr 24 Javascript
javascript记住用户名和登录密码(两种方式)
Aug 04 Javascript
jQuery实现为控件添加水印文字效果(附源码)
Dec 02 Javascript
js实现倒计时及时间对象
Nov 15 Javascript
vue-cli入门之项目结构分析
Apr 20 Javascript
微信小程序商品详情页规格属性选择示例代码
Oct 30 Javascript
node.js到底要不要加分号浅析
Jul 11 Javascript
node全局变量__dirname与__filename的区别
Jan 14 Javascript
jQuery实现表格的增、删、改操作示例
Jan 27 jQuery
thinkjs微信中控之微信鉴权登陆的实现代码
Aug 08 Javascript
详解jQuery中的easyui
Sep 02 #jQuery
vue-cli脚手架的安装教程图解
Sep 02 #Javascript
vue-router 实现导航守卫(路由卫士)的实例代码
Sep 02 #Javascript
全面解析vue router 基本使用(动态路由,嵌套路由)
Sep 02 #Javascript
解决Vue 项目打包后favicon无法正常显示的问题
Sep 01 #Javascript
修改vue+webpack run build的路径方法
Sep 01 #Javascript
解决vue项目使用font-awesome,build后路径的问题
Sep 01 #Javascript
You might like
有关JSON以及JSON在PHP中的应用
2010/04/09 PHP
解析php 版获取重定向后的地址(代码)
2013/06/26 PHP
PHP仿博客园 个人博客(1) 数据库与界面设计
2013/07/05 PHP
PHP微框架Dispatch简介
2014/06/12 PHP
Codeigniter中禁止A Database Error Occurred错误提示的方法
2014/06/12 PHP
在Yii框架中使用PHP模板引擎Twig的例子
2014/06/13 PHP
PHP内置的Math函数效率测试
2014/12/01 PHP
thinkphp3.x中display方法及show方法的用法实例
2016/05/19 PHP
PHP7标量类型declare用法实例分析
2016/09/26 PHP
Laravel中批量赋值Mass-Assignment的真正含义详解
2017/09/29 PHP
记Laravel调用Gin接口调用formData上传文件的实现方法
2019/12/12 PHP
Yii中特殊行为ActionFilter的使用方法示例
2020/10/18 PHP
jQuery Selector选择器小结
2010/05/06 Javascript
javascript下string.format函数补充
2010/08/24 Javascript
改写一个简单的菜单 弹性大小
2010/12/02 Javascript
JavaScript中获取未知对象属性的代码
2011/04/27 Javascript
jQuery Validate插件实现表单强大的验证功能
2015/12/18 Javascript
Node.js开发教程之基于OnceIO框架实现文件上传和验证功能
2016/11/30 Javascript
Javascript实现一个简单的输入关键字添加标签效果实例
2017/06/01 Javascript
微信小程序中button组件的边框设置的实例详解
2017/09/27 Javascript
Vue中的异步组件函数实现代码
2018/07/20 Javascript
再也不怕 JavaScript 报错了,怎么看怎么处理都在这儿
2020/12/09 Javascript
采用python实现简单QQ单用户机器人的方法
2014/07/03 Python
python实现带声音的摩斯码翻译实现方法
2015/05/20 Python
使用Python读取安卓手机的屏幕分辨率方法
2018/03/31 Python
基于Python实现定时自动给微信好友发送天气预报
2018/10/25 Python
Python3如何在服务器打印资产信息
2020/08/27 Python
美国购买韩国护肤和美容产品网站:Althea Korea
2020/11/16 全球购物
化学教师自荐信范文
2013/12/28 职场文书
证婚人搞笑证婚词
2014/01/10 职场文书
物流专业大学的自我评价
2014/01/11 职场文书
《小壁虎借尾巴》教学反思
2014/02/16 职场文书
师德师风个人整改措施
2014/10/27 职场文书
小学2016年第十八届推普周活动总结
2016/04/05 职场文书
使用CSS设置滚动条样式
2022/01/18 HTML / CSS
Netty客户端接入流程NioSocketChannel创建解析
2022/03/25 Java/Android