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 ...
随机推荐
- 防止跨站攻击——CSRFToken
怎么防止跨站攻击: 表单:在 Form 表单中添加一个隐藏的的字段,值是 csrf_token. 非表单:在ajax获取数据时,添加headers:{ 'X-CSRFToken':getCookie( ...
- Docker跨主机容器之间的通信macvlan
找两台测试机: [root@docker1 centos_zabbix]# docker network ls NETWORK ID NAME DRIVER SCOPE 19ac9a55bedb br ...
- 使用itchat发送天气信息
微信发送当日天气情况 念头萌生 之前在浏览网站的时候发现了篇文章「玩转树莓派」为女朋友打造一款智能语音闹钟,文章中介绍了使用树莓派打造一款语音播报天气的闹钟. 当时就想照着来,也自己做个闹钟.因为一直 ...
- Hackintosh Of Lenovo R720 15IKBN
Hackintosh Of Qftm 一个黑苹果爱好者的项目 定制:macOS Catalina 10.15.1 电脑配置 一键查看电脑配置(鲁大师.360驱动管理.Lenovo管家等) 规格 详细信 ...
- Internet上的音频/视频概述
Internet上的音频/视频概述 计算机网络最初是为传送数据信息设计的.因特网 IP 层提供的"尽最大努力交付"服务,以及每一个分组独立交付的策略,对传送数据信息也是很合适的. ...
- Linux系统发行版本及其区别
1 Linux系统组成 Linux操作系统=Linux内核+GNU软件及系统软件+必要的应用程序.下表为Linux系统各组成部分的贡献人员: Linux内核 GNU组件(gcc.bash) 其他必要应 ...
- python爬虫之数据加密解密
一.什么叫数据加密 数据加密是指利用加密算法和秘钥将明文转变为密文的过程. 二.数据加密的方式 1.单向加密 指只能加密数据而不能解密数据,这种加密方式主要是为了保证数据的完整性,常见的加密算法有MD ...
- 201771010105—达拉草 实验一 软件工程准备—<软件工程构建之法—初步了解和认识>
项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 https://www.cnblogs.com/nwnu-daizh/p ...
- PHP文件上传 （以上传txt文件为例）
1.前端代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <ti ...
- php表单提交后再后退 内容则默认清空的解决方法
转载原文地址: http://www.jquerycn.cn/a_14422 在session_start()之后,字符输出之前加上header("Cache-control: privat ...