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. Python-SSH批量登陆并执行命令

    Python-SSH批量登陆并执行命令 #!/usr/bin/env python #-*- coding:utf-8 -*- import paramiko from time import cti ...

  2. Django环境的搭建以及最简示例

    一.环境的搭建 先安装pip yum install python-pip 安装失败: 安装epel扩展源 yum install epel-release 在安装pip 再利用pip安装django ...

  3. 吴裕雄--天生自然python学习笔记：Python3 网络编程

    Python 提供了两个级别访问的网络服务.: 低级别的网络服务支持基本的 Socket,它提供了标准的 BSD Sockets API,可以访问底层操作系统Socket接口的全部方法. 高级别的网络 ...

  4. JVM笔记(一)

    <ignore_js_op> Class Loader类加载器负责加载class文件,class文件在文件开头有特定的文件标识,并且ClassLoader只负责class文件的加载,至于它 ...

  5. MyBatis like (模糊查询)

    select * from user where user_name like concat('%',#{userName},'%'); select * from user where user_n ...

  6. javaWeb简单登录实现验证数据库

    用户登录案例需求: 1.编写login.html登录页面 username & password 两个输入框 2.使用Druid数据库连接池技术,操作mysql,day14数据库中user表 ...

  7. NSURLSession与NSURLConnection区别

    1. 使用现状      NSURLSession是NSURLConnection 的替代者,在2013年苹果全球开发者大会(WWDC2013)随ios7一起发布,是对NSURLConnection进 ...

  8. Daily Practice 2016-09-20

    算法 回文(Palindrome)数字:判断一个数字是不是回文数字,不能使用另外的空间. 提示: 负数可以是回文数字吗? 如果转为字符串需要新分配空间 你也许想到了反转数字,但反转数字可能溢出,怎样处 ...

  9. Go技术日报（2020-02-28）

    go 语言中文网(每日资讯)_2020-02-28 一.Go 语言中文网 Gopher 学习效率低怎么办?曹大谈工程师应该怎么学习 Go 的 http 包中默认路由匹配规则 [每日一库]Web 表单验 ...

  10. 初识SpringAOP

    概述 AOP(Aspect Oriented Programming),即面向切面编程 ​ 通过预编译方式和运行期动态代理实现程序功能的统一维护的一种技术.AOP是OOP的延伸,是软件系统开发中的一个 ...