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外用的更多相关文章

  1. vue.js组件化开发实践

    前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎么实现,技术选型自然 ...

  2. VUE.JS组件化

    VUE.JS组件化 前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎 ...

  3. Vue.js 组件编码规范

    本规范提供了一种统一的编码规范来编写 Vue.js 代码.这使得代码具有如下的特性: 其它开发者或是团队成员更容易阅读和理解. IDEs 更容易理解代码,从而提供高亮.格式化等辅助功能 更容易使用现有 ...

  4. 如何理解vue.js组件的作用域是独立的

    vue.js组件的作用域是独立,可以从以下三个方面理解: 1.父组件模板在父组件作用域内编译,父组件模板的数据用父组件内data数据:2.子组件模板在子组件作用域内编译,子组件模板的数据用子组件内da ...

  5. 浅尝Vue.js组件(一)

    本篇目录: 组件名 组件注册 全局注册 基础组件的自动化全局注册 局部注册 在模块系统中局部注册 Prop 单向数据流 Prop验证 类型检查 非Prop特性 替换/合并已有的特性 禁用特性继承 自定 ...

  6. Vue.js 组件的三个 API：prop、event、slot

    组件的构成 一个再复杂的组件,都是由三部分组成的:prop.event.slot,它们构成了 Vue.js 组件的 API.如果你开发的是一个通用组件,那一定要事先设计好这三部分,因为组件一旦发布,后 ...

  7. Vue.js组件的重要选项

    Vue.js组件的重要选项 实例化Vue对象一些很重要的选项,Vue的所有数据都是放在data里面的,Vue的参数是个对象,对象里面的字段叫做data,data里面也是对象,data也可以写作是thi ...

  8. vue.js组件（component）

    简介: 组件(Component)是 Vue.js 最强大的功能之一. 组件可以扩展 HTML 元素,封装可重用的代码. 组件系统让我们可以用独立可复用的小组件来构建大型应用,几乎任意类型的应用的界面 ...

  9. Vue.js组件学习

    组件可以扩展HTML元素,封装可重用的HTML代码,我们可以将组件看作自定义的HTML元素.组件系统提供了一种抽象,让我们可以使用独立可复用的小组件来构建大型应用. 一个简单组件例子(全局注册) &l ...

随机推荐

  1. Lua 学习 chapter30 编写c函数的技巧 - Jow的博客

    目录 数组操作 字符串操作 在c函数中保存状态 生活总需要一点仪式感,然后慢慢的像那个趋向完美的自己靠近. 数组操作 Lua中的数组就是以特殊的方式使用边.像lua_setttable and lua ...

  2. Android的HttpClient调用，冲突的解决办法

    只适用部分情况 题外话 攻关百度自动发贴作推广失败,但登录已拿下.全扔有点浪费. 在登录的基础上写了个百度的自动签到系统,功能已实现([java,android,nodejs,.net]+nodejs ...

  3. SpringBoot + JPA + mariadb

    SpringBoot + JPA + MariaDB 源码:https://github.com/ldl326308/LiveGreen-SpringBoot.git JPA持久层方法名命名规则:

  4. ajax async异步

    async默认的设置值为true,这种情况为异步方式,就是说当ajax发送请求后,在等待server端返回的这个过程中,前台会继续执行ajax块后面的脚本,直到server端返回正确的结果才会去执行s ...

  5. SQL语言基础及数据库的创建

    一.数据类型:1.二进制数据二进制数据以十六进制形式存储.二进制数据最多能存8000个英文字符,4000个汉字字符. 2.字符数据char:存100,不足100补足.varcha:存多少占多少. 3. ...

  6. ES介绍与实践

    一.ES介绍 1.基础概念介绍 1. 索引:Elasticsearch中的“索引”有点像关系数据库中的数据库. 它是存储/索引数据的地方: 2.分片 shard “分片”是Lucene的一个索引. 它 ...

  7. Redis-输入输出缓冲区

    一.client list id:客户端连接的唯一标识,这个id是随着Redis的连接自增的,重启Redis后会重置为0addr:客户端连接的ip和端口fd:socket的文件描述符,与lsof命令结 ...

  8. GRE阅读

    界面和托福差不多,就是反一反 GRE先读文章!因为出题顺序不一致.另外,不能跳读!!每一句都要读,即使不是观点. 考察能力: 1 三秒版本 边读边概括 解决前面的抗遗忘能力 2 句间关系 取同 取反 ...

  9. 20190407-ORID

    2019-04-07 Objective 关于今天的课程,你记得什么? 给代码建立分支的操作 完成了什么? 完成了rails101前6节 Relective 今天的高峰是什么? 成功完成rails10 ...

  10. 从2019-nCoV趋势预测问题，联想到关于网络安全态势预测问题的讨论

    0. 引言 在这篇文章中,笔者希望和大家讨论一个话题,即未来趋势是否可以被精确或概率性地预测. 对笔者所在的网络安全领域来说,由于网络攻击和网络入侵常常变现出随机性.非线性性的特征,因此纯粹的未来预测 ...