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 RadioButtonList获取选中值
Apr 09 Javascript
Javascript String对象扩展HTML编码和解码的方法
Jun 02 Javascript
IE中createElement需要注意的一个问题
Jul 13 Javascript
图片onload事件触发问题解决方法
Jul 31 Javascript
基于JQuery实现滚动到页面底端时自动加载更多信息
Jan 31 Javascript
浏览器环境下JavaScript脚本加载与执行探析之defer与async特性
Jan 14 Javascript
原生js三级联动的简单实现代码
Jun 07 Javascript
微信小程序 Audio API详解及实例代码
Sep 30 Javascript
JS实现的DOM插入节点操作示例
Apr 04 Javascript
JQuery属性操作与循环用法示例
May 15 jQuery
node-red File读取好保存实例讲解
Sep 11 Javascript
JavaScript使用canvas绘制随机验证码
Feb 17 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
PHP5新特性: 更加面向对象化的PHP
2006/11/18 PHP
PHP中in_array的隐式转换的解决方法
2018/03/06 PHP
php 截取中英文混合字符串的方法
2018/05/31 PHP
thinkPHP5框架路由常用知识点汇总
2019/09/15 PHP
YII2框架中ActiveDataProvider与GridView的配合使用操作示例
2020/03/18 PHP
JQuery获取各种宽度、高度(format函数)实例
2013/03/04 Javascript
jquery属性过滤选择器使用示例
2013/06/18 Javascript
js/jquery去掉空格,回车,换行示例代码
2013/11/05 Javascript
jQuery文件上传插件Uploadify使用指南
2014/06/05 Javascript
任意Json转成无序列表的方法示例
2016/12/09 Javascript
微信小程序图片轮播组件gallery slider使用方法详解
2018/01/31 Javascript
Angularjs Promise实例详解
2018/03/15 Javascript
nodejs基础之buffer缓冲区用法分析
2018/12/26 NodeJs
Vue入门学习笔记【基本概念、对象、过滤器、指令等】
2019/04/13 Javascript
vue封装swiper代码实例解析
2019/10/08 Javascript
javascript 使用sleep函数的常见方法详解
2020/04/26 Javascript
浅谈vue 二级路由嵌套和二级路由高亮问题
2020/08/06 Javascript
Python help()函数用法详解
2014/03/11 Python
python实现简单贪吃蛇游戏
2020/09/29 Python
python import 上级目录的导入
2020/11/03 Python
python线程优先级队列知识点总结
2021/02/28 Python
css3图片边框border-image的用法
2017/06/30 HTML / CSS
使用HTML和CSS实现的标签云效果(附demo)
2021/02/03 HTML / CSS
18-35岁旅游团的全球领导者:Contiki
2017/02/08 全球购物
澳大利亚领先的在线美容商城:Adore Beauty
2017/04/14 全球购物
Orlebar Brown官网:设计师泳裤和泳装
2020/12/08 全球购物
Windows和Linux动态库应用异同
2016/04/17 面试题
国际金融专业大学生职业生涯规划书
2013/12/28 职场文书
竞选学委演讲稿
2014/09/13 职场文书
2015年国际护士节演讲稿
2015/03/18 职场文书
财务经理岗位职责范本
2015/04/08 职场文书
工作犯错保证书
2015/05/11 职场文书
小学安全教育主题班会
2015/08/12 职场文书
咖啡厅里的创业计划书
2019/08/21 职场文书
Python多线程 Queue 模块常见用法
2021/07/04 Python
科学家测试在太空中培育人造肉,用于未来太空旅行
2022/04/29 数码科技