Vue.js组件嵌套和template外用
Vue.extend组件的嵌套和template外用
组件嵌套分为全局组件嵌套和局部组件嵌套
- 组件嵌套需要将子元素写在父元素内
- 子组件必须在父组件中注册之后才能在父组件的模板中使用
全局组件嵌套
Vue.component('Father',{
template: '<h3> father <Son></Son> </h3>'//这里要把子组件加进来
})
Vue.component('Son',{
template: '<h3> son </h3>'
}) new Vue({
el: '#app',
})
局部组件嵌套
new Vue({
el: '#app',
components: {
'Father': {
template: '<div> father <Son/> </div>',//这里也要把子组件加进来,组件可以使用单标签
components: {
'Son': {//子组件必须在父组件内创建才行
template: '<h3> Son </h3>'
}
}
}
}
})
template的外用
注意:template外用,组件模板中的第一个元素必须唯一
<body>
<div id="app">
<Hello></Hello><!---在组件模板中调用之后还要在根实例模板中调用一下--->
</div> <template id="Hello">
<div class="content"><!---这个元素必须唯一的--->
<ul>
<li><a href="">你好</a></li><!---里面的子元素可以多个--->
<li><a href="">你好</a></li>
<li><a href="">你好</a></li>
</ul>
</div>
</template>
</body>
Vue.component('Hello',{
template: '#Hello'//这里的作用相当于根实例中的el:'app' ;作用一样,都是挂载
}) new Vue({
el: '#app',
})
摘自:
https://blog.csdn.net/zhangyuea/article/details/89421424
Vue.js组件嵌套和template外用的更多相关文章
- vue.js组件化开发实践
前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎么实现,技术选型自然 ...
- VUE.JS组件化
VUE.JS组件化 前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎 ...
- Vue.js 组件编码规范
本规范提供了一种统一的编码规范来编写 Vue.js 代码.这使得代码具有如下的特性: 其它开发者或是团队成员更容易阅读和理解. IDEs 更容易理解代码,从而提供高亮.格式化等辅助功能 更容易使用现有 ...
- 如何理解vue.js组件的作用域是独立的
vue.js组件的作用域是独立,可以从以下三个方面理解: 1.父组件模板在父组件作用域内编译,父组件模板的数据用父组件内data数据:2.子组件模板在子组件作用域内编译,子组件模板的数据用子组件内da ...
- 浅尝Vue.js组件(一)
本篇目录: 组件名 组件注册 全局注册 基础组件的自动化全局注册 局部注册 在模块系统中局部注册 Prop 单向数据流 Prop验证 类型检查 非Prop特性 替换/合并已有的特性 禁用特性继承 自定 ...
- Vue.js 组件的三个 API:prop、event、slot
组件的构成 一个再复杂的组件,都是由三部分组成的:prop.event.slot,它们构成了 Vue.js 组件的 API.如果你开发的是一个通用组件,那一定要事先设计好这三部分,因为组件一旦发布,后 ...
- Vue.js组件的重要选项
Vue.js组件的重要选项 实例化Vue对象一些很重要的选项,Vue的所有数据都是放在data里面的,Vue的参数是个对象,对象里面的字段叫做data,data里面也是对象,data也可以写作是thi ...
- vue.js组件(component)
简介: 组件(Component)是 Vue.js 最强大的功能之一. 组件可以扩展 HTML 元素,封装可重用的代码. 组件系统让我们可以用独立可复用的小组件来构建大型应用,几乎任意类型的应用的界面 ...
- Vue.js组件学习
组件可以扩展HTML元素,封装可重用的HTML代码,我们可以将组件看作自定义的HTML元素.组件系统提供了一种抽象,让我们可以使用独立可复用的小组件来构建大型应用. 一个简单组件例子(全局注册) &l ...
随机推荐
- Lua 学习 chapter30 编写c函数的技巧 - Jow的博客
目录 数组操作 字符串操作 在c函数中保存状态 生活总需要一点仪式感,然后慢慢的像那个趋向完美的自己靠近. 数组操作 Lua中的数组就是以特殊的方式使用边.像lua_setttable and lua ...
- Android的HttpClient调用,冲突的解决办法
只适用部分情况 题外话 攻关百度自动发贴作推广失败,但登录已拿下.全扔有点浪费. 在登录的基础上写了个百度的自动签到系统,功能已实现([java,android,nodejs,.net]+nodejs ...
- SpringBoot + JPA + mariadb
SpringBoot + JPA + MariaDB 源码:https://github.com/ldl326308/LiveGreen-SpringBoot.git JPA持久层方法名命名规则:
- ajax async异步
async默认的设置值为true,这种情况为异步方式,就是说当ajax发送请求后,在等待server端返回的这个过程中,前台会继续执行ajax块后面的脚本,直到server端返回正确的结果才会去执行s ...
- SQL语言基础及数据库的创建
一.数据类型:1.二进制数据二进制数据以十六进制形式存储.二进制数据最多能存8000个英文字符,4000个汉字字符. 2.字符数据char:存100,不足100补足.varcha:存多少占多少. 3. ...
- ES介绍与实践
一.ES介绍 1.基础概念介绍 1. 索引:Elasticsearch中的“索引”有点像关系数据库中的数据库. 它是存储/索引数据的地方: 2.分片 shard “分片”是Lucene的一个索引. 它 ...
- Redis-输入输出缓冲区
一.client list id:客户端连接的唯一标识,这个id是随着Redis的连接自增的,重启Redis后会重置为0addr:客户端连接的ip和端口fd:socket的文件描述符,与lsof命令结 ...
- GRE阅读
界面和托福差不多,就是反一反 GRE先读文章!因为出题顺序不一致.另外,不能跳读!!每一句都要读,即使不是观点. 考察能力: 1 三秒版本 边读边概括 解决前面的抗遗忘能力 2 句间关系 取同 取反 ...
- 20190407-ORID
2019-04-07 Objective 关于今天的课程,你记得什么? 给代码建立分支的操作 完成了什么? 完成了rails101前6节 Relective 今天的高峰是什么? 成功完成rails10 ...
- 从2019-nCoV趋势预测问题,联想到关于网络安全态势预测问题的讨论
0. 引言 在这篇文章中,笔者希望和大家讨论一个话题,即未来趋势是否可以被精确或概率性地预测. 对笔者所在的网络安全领域来说,由于网络攻击和网络入侵常常变现出随机性.非线性性的特征,因此纯粹的未来预测 ...