Vue2.0 【第二季】第8节 Component 父子组件关系
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 父子组件关系的更多相关文章
- Component 父子组件关系
我们把组件编写的代码放到构造器外部或者说单独文件 我们需要先声明一个对象,对象里就是组件的内容. var zdy = { template:`<div>Panda from China!& ...
- Vue2.0 【第二季】第6节 Component 初识组件
目录 Vue2.0 [第二季]第6节 Component 初识组件 第6节 Component 初识组件 一.全局化注册组件 二.局部注册组件局部 三.组件和指令的区别 Vue2.0 [第二季]第6节 ...
- vue 专题 vue2.0各大前端移动端ui框架组件展示
Vue 专题 一个数据驱动的组件,为现代化的 Web 界面而生.具有可扩展的数据绑定机制,原生对象即模型,简洁明了的 API 组件化 UI 构建 多个轻量库搭配使用 请访问链接: https://ww ...
- vue2.0 自定义 图片上传（UpLoader）组件
1.自定义组件 UpLoader.vue <!-- 上传图片 组件 --> <template> <div class="vue-uploader"& ...
- vue2.0 之 douban （三）创建header组件
1.分析 首页的header背景是绿色的,并且有一个搜索框,其他页面都是灰色的背景,在header的左侧,是一个返回按钮,右侧,有分享或者评论等图标,中间就是header的标题.我们先不做有搜索框的h ...
- vue2.0 之 douban （二）创建自定义组件tabbar
1.大体布局 这个组件分为两部分:第一个是组件的外层容器,第二个是组件的子容器item,子组件里面又分为图片和文字组合.子组件有2个状态,一个默认灰色的状态,一个选中状态,我们来实现一下这个组件的布局 ...
- vue2.0 自定义 饼状图 （Echarts）组件
1.自定义 图表 组件 Echarts.vue <!-- 自定义 echart 组件 --> <template> <div> <!-- echart表格 ...
- vue2中component父子组件传递数据props的使用
子组件使用父亲传过来的数据,我们需要通过子组件的 props 选项. 组件实例的作用域是孤立的,不能在子组件的模板内直接引用父组件的数据.修改父亲传过来的props数据的时候 父亲必须传递对象,否则不 ...
- vue的生命周期（又称钩子函数）----以及vue1.0版本与vue2.0版本生命周期的不同
vue生命周期 1. vue1.0版本与vue2.0版本生命周期的不同 vue1.0版本生命周期图示 图1 vue1.0版本生命周期 vue1.0版本的生命周期: init 实例创建之前 creat ...
随机推荐
- Mate20 pro实现H265 (HEVC)实时硬件编码
谁能告诉我手机上用H265实时编码有什么鸟用? 一.先看看手机支持哪些codec ALL_CODECS REGULAR_CODECS mine-type 选择mime-type为video/hevc, ...
- centos 中文乱码解决办法
缘由:本人在虚拟机中安装centos 5.3,起初安装时选择了english,后来使用的过程中发现打开网页,会出现中文乱码,无法正常显示.当然,本地文件中的中文更是无法显示. 若是将系统语言langu ...
- python——删除列表中的元素
在python中,删除列表元素的方法有三种,分别为remove(),del(),pop()函数 (1)remove() >>> name = ['小明','小华','小红','小李' ...
- top和margin-top的区别
1.top等为绝对定位,需与position:absolute一起用才有效:而margin-top为相对定位: 2.绝对定位一般情况下以body为标准:若父元素设置position:relative, ...
- file,path,uri互相转换
uri 转 file :File file = new File(new URI(uri.toString())); uri 转 path: Path path = Files.get(uri); f ...
- interrupt 停止线程
该方法只是给线程设置了一个停止的标记 并不是真正的立即停止线程 interrupted() 测试当前线程是否已经中断 isInterrupted() 测试线程是否已经中断 停止线程的方法: .异常法 ...
- 1005 继续(3n+1)猜想 (25 分)
题目:链接 卡拉兹(Callatz)猜想已经在1001中给出了描述.在这个题目里,情况稍微有些复杂. 当我们验证卡拉兹猜想的时候,为了避免重复计算,可以记录下递推过程中遇到的每一个数.例如对 n=3 ...
- 是谁收购了被谷歌私藏7年之久的Zagat？
国内餐饮行业的风口似乎总是执着于"价格"上,无论是天天搞特价的外卖,还是优惠不停歇的团购网站,都将"价格"当做了竞争的杀手锏.即使是网红奶茶.甜品之类的,也是将 ...
- <SDOI2009>学校食堂
我. 调了快一天 因为一个位置错误的感叹号 :-) !!!!!!!!!!!!!!!!!!!!!!!!!!!!!! 狗dp #include<cstdio> #include<cstr ...
- Hi3518_SDK
第一章 Hi3518_SDK_Vx.x.x.x版本升级操作说明 如果您是首次安装本SDK,请直接参看第2章. 第二章 首次安装SDK 1.Hi3518 SDK包位置 在"Hi3518_V10 ...