Vue.js多重组件嵌套

Vue.js中提供了非常棒的组件化思想,组件提高了代码的复用性.今天我们来实现一个形如

<app>

    <app-header></app-header>

    <app-content></app-content>

    <app-footer></app-footer>

</app>

的一个复合组件

1.js部分(component.js)

(function () {

    Vue.component('app',{

        template:'<div class="container"><div class="topBar">这个地方在渲染后不会被占用</div><slot></slot></div>'

    });

    Vue.component('app-header',{

        template:'<div class="header" slot="header">this is header</div>'

    });

    Vue.component('app-content',{

        template:'<div class="content">this is content</div>'

    });

    Vue.component('app-footer',{

        template:'<div class="footer">this is footer</div>'

    });

    var myApp=new Vue({

        el:'#myApp'

    });

})()
代码解释:
1. Vue.component定义了一个组件,其中的'app'是组件的名称,可以在html代码中直接把它当成一个标签来使用
2. template表示这个组件实际由什么html代码组成,可以直接在解释中写,也可以写一个ID,然后再html代码中写一个template模板,模板的ID就是此处写的ID,形如:
//js代码

Vue.component('app-header',{

        template:'#headerTemplate'

    });

//html代码

<template id="headerTemplate">

	<div class="header" slot="header">this is header</div>

</template>
3. 我们要把app-header,app-content,app-footer这些子组件都放在app里面装起来,如果app这个组件内部也有多个元素,那么Vue怎么知道你需要把这些子组件放在app的哪个位置呢?所以我们需要在app的模板中指定一个slot,意思就是,其他组件都放在它里面,而不要去填充其他元素
注意事项:实例化myApp一定要放在组件注册之后,否则会报错哦

2.html部分

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>多重组件嵌套</title>

<style>

    .container{

        width: 500px;height: 190px;margin: 100px auto;text-align: center;

        font-family: 微软雅黑;

    }

    .topBar{

        height: 40px;line-height: 40px;background-color: #4CD68E;

    }

    .header{

        height: 40px;background-color: #0c60ee;color: #fff;line-height: 40px;

    }

    .content{

        height: 50px;background-color: #2ac845;color: #333;line-height: 50px;

    }

    .footer{

        height: 60px;background-color: #30BD8A;color: yellow;line-height: 60px;

    }

</style>

<script src="js/vue.js"></script>

</head>

<body>

<div id="myApp">

    <app>

        <app-header></app-header>

        <app-content></app-content>

        <app-footer></app-footer>

    </app>

</div>

</body>

<script src="js/component.js"></script>

</html>
html代码部分没有过多需要解释的,不过要注意的是引用component.js要在Vue.js以及页面渲染完成之后,否则会报错.

最后放上一张效果图

Vue.js多重组件嵌套的更多相关文章

  1. Vue.js之组件嵌套小demo

    Vue.js之组件嵌套的小demo项目 第一步:初始化一个wabpack项目,这里不在复述.第二步:在components文件夹下新建Header.vue Footer.vue和Users.vue三个 ...

  2. Vue.js之组件嵌套

    Vue.js中组件嵌套有两种方式 第一种:注册全局组件 例如在components文件夹下新建一个User.vue组件,然后在main.js文件中注册全局组件 //注册全局组件 Vue.compone ...

  3. 【Vue课堂】Vue.js 父子组件之间通信的十种方式

    这篇文章介绍了Vue.js 父子组件之间通信的十种方式,不管是初学者还是已经在用 Vue 的开发者都会有所收获.无可否认,现在无论大厂还是小厂都已经用上了 Vue.js 框架,简单易上手不说,教程详尽 ...

  4. 【Vue.js实战案例】- Vue.js递归组件实现组织架构树和选人功能

    大家好!先上图看看本次案例的整体效果. 浪奔,浪流,万里涛涛江水永不休.如果在jq时代来实这个功能简直有些噩梦了,但是自从前端思想发展到现在的以MVVM为主流的大背景下,来实现一个这样繁杂的功能简直不 ...

  5. Vue.js之组件传值

    Vue.js之组件传值 属性传值可以从父组件到子组件,也可以从子组件到父组件. 这里讲一下从父组件到子组件的传值 还以上次的demo为例,demo里有APP.vue是父组件,Header.vue,Us ...

  6. vue.js 同级组件之间的值传递方法(uni-app通用)

    vue.js 兄弟组件之间的值传递方法 https://blog.csdn.net/jingtian678/article/details/81634149

  7. Vue.js说说组件

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

  8. Vue.js使用-组件（上篇）

    1.什么是组件 组件可以理解为定义的一个view模块,可重复使用. 2.组件使用 1)创建组件 var myComponent = Vue.extend({ template: ' this is a ...

  9. 用Vue.js递归组件构建一个可折叠的树形菜单

    在Vue.js中一个递归组件调用的是其本身,如: Vue.component('recursive-component', {   template: `<!--Invoking myself! ...

随机推荐

  1. NGUI 使用EventDelegate.Add与UIInput.onSubmit、UIInput.onChange限定编辑框中的内容

    Unity中,使用NGUI,通常为某个控件(如按钮)绑定事件(单击.双击.拖拽.滚轮.选择等)都是用UIEventListener,比如: public void Bind() { UIEventLi ...

  2. netcat使用

    一.端口监听(实时消息) 首先在A计算机上,它充当的是服务器角色,$ nc -l 3333 这时就创建了一个监听端口(listening socket(server)).- -l 它让 nc 监听一个 ...

  3. [goa]golang微服务框架学习（三）-- 使用swagger-ui展示API

    既然goa框架自动生成啦swagger-json文件,那么如何用swagger-ui展示出来呢? 这里分三步: 1.下载swagger-ui的web代码 2.添加swagger.json 和 swag ...

  4. a 标签提交前验证

    最近在做验证的时候遇到了submit()与onsubmit()事件冲突的问题,本来想在a标签中添加submit()进行表单的提交,然后在 form中添加onsubmit事件触发验证方法.结果行不通,最 ...

  5. gulp系列文章一 fis vs grunt vs gulp，为什么要是gulp呢？

    gulp是最近火起来的前端构建工具,大有赶超grunt之势,它和grunt这种构建工具比较像. grunt是写一个Gruntfile.js来写配置代码,gulp则是写一个gulpfile.js来写配置 ...

  6. PHP array_multisort—对多个数组或多维数组进行排序

    PHP中array_multisort可以用来一次对多个数组进行排序,或者根据某一维或多维对多维数组进行排序. 关联(string)键名保持不变,但数字键名会被重新索引. 输入数组被当成一个表的列并以 ...

  7. link和import的区别

    1.link是xhtml标签,除了可以加载css外,还可以加载定义其他的事务:@import只属于css的范畴,只能加载css: 2.link引用CSS时,在页面载入时同时加载:@import需要页面 ...

  8. C# 自定义FileUpload控件

    摘要:ASP.NET自带的FileUpload控件会随着浏览器的不同,显示的样式也会发生改变,很不美观,为了提高用户体验度,所以我们会去自定义FileUpload控件 实现思路:用两个Button和T ...

  9. interactivePopGestureRecognizer

    苹果一直都在人机交互中尽力做到极致,在iOS7中,新增加了一个小小的功能,也就是这个api:self.navigationController.interactivePopGestureRecogni ...

  10. DIV+CSS:页脚永远保持在页面底部

    页脚永远保持在页面底部 有时候,我们用CSS创建一个高度自适应布局,如何保证页脚(footer)在内容不超过一屏的情况下始终保持在布局最下方是一个比较头疼的事.我看过一些利用绝对定位的例子,但总感觉不 ...