详解vue父子模版嵌套案例


Posted in Javascript onMarch 04, 2017

这里是父子模版的调用

这里是针对于vue1.0,如果要学2.0,建议大家去看官方文档

vue2.0 :http://vuefe.cn/guide/

vue-router2.0: https://router.vuejs.org/zh-cn/essentials/getting-started.html

第一种,子组件模版直接写在js里

//定义模版挂载点my-component
<div id="exampleBox1"> 
  <com-ponent></com-ponent>
</div>
<script src="../vue/node_modules/vue/dist/vue.js"></script>
<script> 
  var Component = Vue.extend({// 定义
  template: '<div>A custom component!</div>',
  data: function () {
    return {
      name: 'yuxie' 
    }
  }
});
Vue.component('com-ponent', Component);// 注册 
//注意,extend(json) 和 vue.component('com-ponent', json)//这两个JSON是相等的。
//所以下面第二种会将extend()函数省略掉,直接在component中定义,系统会自动调用extend函数。
  var conp = new Vue({// 创建根实例
    el: '#exampleBox1' 
   });
</script>

第二种,使用HTML模版

<!-- 父组件模板 -->
<div id="exampleBox2" style="border:1px solid #ccc;width:500px;">
  <div>{{parent.name}}</div>
  <!--模版挂载标识-->
  <children></children>
</div>
<!-- 子组件模板 -->
<template id="child-template"> 
  <p style="background:#eee;">{{text}}</p>
</template>
<script> 
Vue.component('children', {//child是模版挂载的标签名    
   template: '#child-template',//id对应子组件的ID    
   data: function () {      
     return {        
       text: '这里是子组件的内容'      
     }    
   }  
});  
var parent = new Vue({// 初始化父组件    
    el: '#exampleBox2',    
    data: {      
      parent: {        
         name:'这里是父组件的内容'      
      }      
     }  
 })
</script>

第三种、来一个复杂的

<div id="example">
  <!--  所有的模板挂件,都必须在根实例ID内部,否则找不到挂件  -->
  <my-component></my-component>
  <!-- 模版可以重用多次 ···· 只不过一样的东西没有这个必要 -->
  <child></child>复用一次
  <child></child>复用二次
  <child></child> ···
  <child></child> ···
</div>
<!--比如放在这里是找不到的-->
<child></child>
<script src="../vue/node_modules/vue/dist/vue.js"></script>
<script>
//定义子组件,子组件必须在父组件之前定义。  
var Child = Vue.extend({template: '<div>A child component!</div>'}); 
//定义父组件
var Parent = Vue.extend({
  template: '<div style="border: 1px solid #ccc;width:200px;">Parent<child-component></child-component>父模版内部</div>', 
     components: {
       // 调用子组件 
       'child-component': Child 
     } 
  }); 
  // 注册父组件 
  Vue.component('my-component', Parent);
  //复用子组件。
  Vue.component('child', Child); 
  // 创建根实例,所有组件都需要在根实例之前创建。
  new Vue({ 
    el: '#example' 
  })
</script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
常用参考资料(手册)下载或者链接
Jul 22 Javascript
在textarea中屏蔽js的某个function的javascript代码
Apr 20 Javascript
基于jquery的网站幻灯片切换效果焦点图代码
Sep 15 Javascript
js的.innerHTML = &quot;&quot;IE9下显示有错误的解决方法
Sep 16 Javascript
javascript校验价格合法性实例(必须输入2位小数)
May 05 Javascript
jquery、js调用iframe父窗口与子窗口元素的方法整理
Jul 31 Javascript
angularjs中的单元测试实例
Dec 06 Javascript
Javascript简写条件语句(推荐)
Jun 12 Javascript
jQuery中fadein与fadeout方法用法示例
Sep 16 Javascript
Bootstrap实现基于carousel.js框架的轮播图效果
May 02 Javascript
如何对react hooks进行单元测试的方法
Aug 14 Javascript
JavaScript canvas基于数组生成柱状图代码实例
Mar 06 Javascript
vue指令以及dom操作详解
Mar 04 #Javascript
JS如何判断浏览器类型和详细区分IE各版本浏览器
Mar 04 #Javascript
详解在Vue中通过自定义指令获取dom元素
Mar 04 #Javascript
在javaScript中检测数据类型的几种方式小结
Mar 04 #Javascript
jQuery插件echarts实现的去掉X轴、Y轴和网格线效果示例【附demo源码下载】
Mar 04 #Javascript
jQuery插件echarts实现的循环生成图效果示例【附demo源码下载】
Mar 04 #Javascript
php输出全部gb2312编码内的汉字方法
Mar 04 #Javascript
You might like
PHP分页显示制作详细讲解
2006/12/05 PHP
PHP中的CMS的涵义
2007/03/11 PHP
PHP URL地址获取函数代码(端口等) 推荐
2010/05/15 PHP
使用php语句将数据库*.sql文件导入数据库
2014/05/05 PHP
PHP实现将科学计数法转换为原始数字字符串的方法
2014/12/16 PHP
php+curl 发送图片处理代码分享
2015/07/09 PHP
php下载文件超时时间的设置方法
2016/10/06 PHP
将input file的选择的文件清空的两种解决方案
2013/10/21 Javascript
jQuery中的height innerHeight outerHeight区别示例介绍
2014/06/15 Javascript
详解Bootstrap创建表单的三种格式(一)
2016/01/04 Javascript
很全面的JavaScript常用功能汇总集合
2016/01/22 Javascript
所见即所得的富文本编辑器bootstrap-wysiwyg使用方法详解
2016/05/27 Javascript
基于jQuery实现Accordion手风琴自定义插件
2020/10/13 Javascript
开源免费天气预报接口API及全国所有地区代码(国家气象局提供)
2016/12/26 Javascript
es7学习教程之Decorators(修饰器)详解
2017/07/21 Javascript
Angular2监听页面大小变化的解决方法
2017/10/09 Javascript
如何用input标签和jquery实现多图片的上传和回显功能
2018/05/16 jQuery
讲解vue-router之什么是嵌套路由
2018/05/28 Javascript
JavaScript中继承原理与用法实例入门
2020/05/09 Javascript
从零开始用webpack构建一个vue3.0项目工程的实现
2020/09/24 Javascript
Django进阶之CSRF的解决
2018/08/01 Python
Linux下远程连接Jupyter+pyspark部署教程
2019/06/21 Python
基于virtualenv创建python虚拟环境过程图解
2020/03/30 Python
巧用CSS3 border实现图片遮罩效果代码
2012/04/09 HTML / CSS
HTML5之消息通知的使用(Web Notification)
2018/10/30 HTML / CSS
H5 video poster属性设置视频封面的方法
2020/05/25 HTML / CSS
C,C++的几个面试题小集
2013/07/13 面试题
劳资人员岗位职责
2013/12/19 职场文书
法学个人求职信范文
2014/01/27 职场文书
司马光教学反思
2014/02/01 职场文书
大学生社会实践方案
2014/05/11 职场文书
四风问题对照检查整改措施思想报告
2014/10/05 职场文书
优秀学生干部事迹材料
2014/12/24 职场文书
大学考试作弊检讨书
2015/05/06 职场文书
孕妇病假条怎么写
2015/08/17 职场文书
Windows server 2016服务器基本设置
2022/08/14 Servers