Vue2.0 【第二季】第8节 Component 父子组件关系

第8节 Component 父子组件关系

在实际开发中我们经常会遇到在一个自定义组件中要使用其他自定义组件，这就需要一个父子组件关系。

一、构造器外部写局部注册组件

上节课我们都把局部组件的编写放到了构造器内部，如果组件代码量很大，会影响构造器的可读性，造成拖拉和错误。

我们把组件编写的代码放到构造器外部或者说单独文件。

我们需要先声明一个对象,对象里就是组件的内容。

var monkeyComponent = {

	template:`<div style="color:red;">Monkey is from China!</div>`

}

声明好对象后在构造器里引用就可以了：

var app = new Vue({

	el:'#app',

	components:{

		"monkey":monkeyComponent

	}

})

html中引用：

<div id="app">

	<monkey></monkey>   //引用

</div>

浏览器效果：

二、父子组件的嵌套

我们先声明一个父组件，比如叫monkey，然后里边我们加入一个city组件，我们来看这样的代码如何写。

html文件：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>component-3</title>

    <script type="text/javascript" src="../assets/js/vue.js"></script>

</head>

    <body>

        <h1>component-3</h1>

        <hr>

        <div id="app">

            <monkey></monkey>

        </div>

        <script type="text/javascript">

            var city = {

                template:`<div style="color:green;">siChuan of China.</div>`

            }

            var monkeyComponent = {

                template:`

                <div>

                    <p>Monkey is from China!</p>

                    <city></city>

                </div>

                `,

                components:{

                    "city":city

                }

            }

            var app = new Vue({

                el:'#app',

                components:{

                    "monkey":monkeyComponent

                }

            })

        </script>

    </body>

</html>

浏览器效果：

Vue2.0 【第二季】第8节 Component 父子组件关系的更多相关文章

  1. Component 父子组件关系

    我们把组件编写的代码放到构造器外部或者说单独文件 我们需要先声明一个对象,对象里就是组件的内容. var zdy = { template:`<div>Panda from China!& ...

  2. Vue2.0 【第二季】第6节 Component 初识组件

    目录 Vue2.0 [第二季]第6节 Component 初识组件 第6节 Component 初识组件 一.全局化注册组件 二.局部注册组件局部 三.组件和指令的区别 Vue2.0 [第二季]第6节 ...

  3. vue 专题 vue2.0各大前端移动端ui框架组件展示

    Vue 专题 一个数据驱动的组件,为现代化的 Web 界面而生.具有可扩展的数据绑定机制,原生对象即模型,简洁明了的 API 组件化 UI 构建 多个轻量库搭配使用 请访问链接: https://ww ...

  4. vue2.0 自定义 图片上传（UpLoader）组件

    1.自定义组件 UpLoader.vue <!-- 上传图片 组件 --> <template> <div class="vue-uploader"& ...

  5. vue2.0 之 douban （三）创建header组件

    1.分析 首页的header背景是绿色的,并且有一个搜索框,其他页面都是灰色的背景,在header的左侧,是一个返回按钮,右侧,有分享或者评论等图标,中间就是header的标题.我们先不做有搜索框的h ...

  6. vue2.0 之 douban （二）创建自定义组件tabbar

    1.大体布局 这个组件分为两部分:第一个是组件的外层容器,第二个是组件的子容器item,子组件里面又分为图片和文字组合.子组件有2个状态,一个默认灰色的状态,一个选中状态,我们来实现一下这个组件的布局 ...

  7. vue2.0 自定义 饼状图 （Echarts）组件

    1.自定义  图表  组件 Echarts.vue <!-- 自定义 echart 组件 --> <template> <div> <!-- echart表格 ...

  8. vue2中component父子组件传递数据props的使用

    子组件使用父亲传过来的数据,我们需要通过子组件的 props 选项. 组件实例的作用域是孤立的,不能在子组件的模板内直接引用父组件的数据.修改父亲传过来的props数据的时候 父亲必须传递对象,否则不 ...

  9. vue的生命周期（又称钩子函数）----以及vue1.0版本与vue2.0版本生命周期的不同

    vue生命周期 1. vue1.0版本与vue2.0版本生命周期的不同 vue1.0版本生命周期图示 图1  vue1.0版本生命周期 vue1.0版本的生命周期: init 实例创建之前 creat ...

随机推荐

  1. jQuery插件开发小结

    jQuery插件开发规范 1. 使用闭包 (function($) { // Code goes here })(jQuery); 这是来自jQuery官方的插件开发规范要求,使用这种编写方式有什么好 ...

  2. the extent of|fill in|find itimpossible to|something|the other day|Be man enough to do sth/for sth|cure sb of |draw out| gone over|made for | see someone off,|

    area or length; amount 面积,范围:长度:数量 We don't yet know the extent of his injuries (= how bad his injur ...

  3. 吴裕雄--天生自然HTML学习笔记：HTML 段落

    HTML 可以将文档分割为若干段落. HTML 段落 段落是通过 <p> 标签定义的. 实例 <p>这是一个段落 </p> <p>这是另一个段落< ...

  4. 链终止法|边合成边测序|Bowtie|TopHat|Cufflinks|RPKM|FASTX-Toolkit|fastaQC|基因芯片|桥式扩增|

    生物信息学 Sanger采用链终止法进行测序 带有荧光基团的ddXTP+其他四种普通的脱氧核苷酸放入同一个培养皿中,例如带有荧光基团的ddATP+普通的脱氧核苷酸A.T.C.G放入同一个培养皿,以此类 ...

  5. Python中为什么可以通过bin(n & 0xffffffff)来获得负数的补码？

    一开始我以为这不是个大问题,因为本来整型数在内存中就是以补码的形式存在的,输出自然也是按照补码输出的,例如C语言中 printf("%X\n",-3); //输出 //FFFFFF ...

  6. JS计算日期加天数后的日期(起始日期+有效天数=截至日期)

    /** * 优惠券有效期 * startDate:起始日期 * valueTime:有效天数 */ function transferCouponValueTime(startDate,valueTi ...

  7. Java WebSocket实现简易聊天室

    一.Socket简介 Socket又称"套接字",应用程序通常通过"套接字"向网络发出请求或者应答网络请求.Socket的英文原义是“孔”或“插座”,作为UNI ...

  8. css之制作三角形

    箭头向上三角形 #triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px ...

  9. MySQL基础篇(05)：逻辑架构图解和InnoDB存储引擎详解

    本文源码:GitHub·点这里 || GitEE·点这里 一.MySQL逻辑架构 1.逻辑架构图 基于下面的逻辑架构图,可以大致熟悉MySQL各个架构组件之间的协同工作关系. 很经典的C/S架构风格, ...

  10. 4款java快速开发平台推荐

    JBoss Seam JBoss Seam,算得上是Java开源框架里面最优秀的快速开发框架之一. Seam框架非常出色,尤其是他的组件机制设计的很有匠心,真不愧是Gavin King精心打造的框架了 ...