<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <link rel="stylesheet" href="demo.css" />
</head>
<body>
  <!--this is my View-->
  <div id="app">
    <parent-component></parent-conponent>
  </div>
  <div id="app2">
    <my-component></my-conponent>
  </div>
  <my-component></my-conponent>
</body>
<script src="vue.min.js"></script>
<script>
var Child = Vue.extend({
  template: '<p> This is child component</p>'
})

var myComponent = Vue.extend({
  template: '<div> This is my first component.</div>'
});
Vue.component('parent-component', {
  template: '<div><p> This is Parent component</p><child-component></child-component></div>',
  components: {
    'child-component': Child
  }
});
new Vue({
  el: '#app'
})
new Vue({
  el: '#app2',
  components: {
    'my-component': myComponent
  }
})
</script>
</html>

Vue.js之父子组件的更多相关文章

  1. 转： Vue.js——60分钟组件快速入门（上篇）

    转自: http://www.cnblogs.com/keepfool/p/5625583.html Vue.js——60分钟组件快速入门(上篇)   组件简介 组件系统是Vue.js其中一个重要的概 ...

  2. Vue.js学习 Item11 – 组件与组件间的通信

    什么是组件? 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有 ...

  3. vue.js 精学组件记录

    组件需要注册后才可以使用. Vue.component('my-component',{ template:'<div>这是组件内容</div>' }): 局部注册组件 var ...

  4. vue.js学习之组件（上篇）

    本文的Demo和源代码已放到GitHub,如果您觉得本篇内容不错,请点个赞,或在GitHub上加个星星! https://github.com/zwl-jasmine95/Vue_test 以下所有知 ...

  5. Vue.js 的精髓——组件

    开篇:Vue.js 的精髓——组件 写在前面 Vue.js,无疑是当下最火热的前端框架 Almost,而 Vue.js 最精髓的,正是它的组件与组件化.写一个 Vue 工程,也就是在写一个个的组件. ...

  6. 【Vue】Vue中的父子组件通讯以及使用sync同步父子组件数据

    前言: 之前写过一篇文章<在不同场景下Vue组件间的数据交流>,但现在来看,其中关于“父子组件通信”的介绍仍有诸多缺漏或者不当之处, 正好这几天学习了关于用sync修饰符做父子组件数据双向 ...

  7. 【Vue】利用父子组件间通信实现一个场景

    组件间通信是组件开发的,我们既希望组件的独立性,数据能互不干扰,又不可避免组件间会有联系和交互. 在vue中,父子组件的关系可以总结为props down,events up: 在vue2.0中废弃了 ...

  8. vue.js相关UI组件收集

    内容 UI组件 开发框架 实用库 服务端 辅助工具 应用实例 Demo示例 ###UI组件 element ★9689 - 饿了么出品的Vue2的web UI工具套件 Vux ★6927 - 基于Vu ...

  9. Vue.js的动态组件模板

    组件并不总是具有相同的结构.有时需要管理许多不同的状态.异步执行此操作会很有帮助. 实例: 组件模板某些网页中用于多个位置,例如通知,注释和附件.让我们来一起看一下评论,看一下我表达的意思是什么.评论 ...

随机推荐

  1. Parameter 'limit' not found. Available parameters are [arg1, arg0, pa

    mybatis代码报错,这是因为mapper识别不了limit,需要替换成 LIMIT #{arg0},#{arg1}

  2. oracle（sql）基础篇系列（一）——基础select语句、常用sql函数、组函数、分组函数

    花点时间整理下sql基础,温故而知新.文章的demo来自oracle自带的dept,emp,salgrade三张表.解锁scott用户,使用scott用户登录就可以看到自带的表. #使用oracle用 ...

  3. 关于 Inno Setup 报木马的问题处理

    用 Inno Setup 生成的安装包总是报木马,尝试了N次之后发现,把 Compression=lzma 改为 Compression=zip 就不会再报了,可能lzma的压缩算法导致delphi的 ...

  4. 关于IOS下日期格式分隔符 - 、 /的问题

    之前我们项目有一个低价日历,服务端下发的时间格式为: "2014-07-21 09:45:12"  然后一直出不了数据,后来发现. IOS下无论chrome.safari还是Uc如 ...

  5. 《算法》C++代码 SPFA

    SPFA的全称是Shortest Path Faster Algorithm,一看名称八成就是中国人起的名字,因为外国人起算法名称一般都会写上自己的名字,很少谦虚.实际上,这是西南交通大学段凡丁同学于 ...

  6. 【转载】Unity3D研究院transform.parent = parent坐标就乱了

    昨天有朋友问我了一个问题,它将Hierarchy视图里的某个子节点下的GameObject拷贝到另外一个对象的子节点下面,他使用的方法就是 transform.parent = parent 但是拷贝 ...

  7. How to solve SyntaxError on autogenerated manage.py?

    错误原因: 今天尝试使用pycharm中的Django. 使用的是基于python3.5的Django2.0.5. 按照官网教程https://docs.djangoproject.com/en/2. ...

  8. nginx 匹配路由分发php和golang

    大概这么个形式,可以走通 server { listen ; server_name localhost; root "E:/wwwroot180/public"; # 匹配指定路 ...

  9. BZOJ1800 [Ahoi2009]fly 飞行棋 【枚举】

    题目 给出圆周上的若干个点,已知点与点之间的弧长,其值均为正整数,并依圆周顺序排列. 请找出这些点中有没有可以围成矩形的,并希望在最短时间内找出所有不重复矩形. 输入格式 第一行为正整数N,表示点的个 ...

  10. GDB调试——经验总结

    GDB调试的一些很有用经验: 1. gdb调试,如果有参数,可以在run命令后加,也可以使用set args :如果是使用gdbserver+gdb的远程调试方式,参数可以在gdbserver后面加. ...