<!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. 初学JS——利用JS制作的别踩白块儿（街机模式） 小游戏

    这个是上个星期5写的了,当时是突然想写个游戏,就想到了别踩白块儿,当时的想法是 可能普通模式的别踩白块儿因为他的“块儿”是滚动的向上这种,以我目前会的技术想不出怎么写, 但是如果是街机模式,通过你每按 ...

  2. 《Cracking the Coding Interview》——第17章：普通题——题目6

    2014-04-28 22:49 题目:给定一个整数数组.如果你将其中一个子数组排序,那么整个数组都变得有序.找出所有这样子数组里最短的一个. 解法:线性时间,常数空间内可以解决,思想类似于动态规划. ...

  3. Pascal小游戏 打飞机

    一个经典的打飞机游戏(1)Pascal代码 十分经典,有一种街机的感觉 奇葩青年的又一控制台神作. uses crt; type list=record         ty,ax:integer;  ...

  4. python 3 使用cmp函数报错

    python3 中已经不使用cmp函数进行比较大小,使用operator模块 import operator lt(a,b) 相当于 a<b 从第一个数字或字母(ASCII)比大小 le(a,b ...

  5. Vue_自定义指令

    关于Vue的自定义指令: - 在Vue中除了核心功能默认内置的指令(v-model & v-show) - Vue也允许注册自定义指令. 注意,在 Vue2.0 中,代码复用和抽象的主要形式是 ...

  6. Python全栈工程师（每周总结：2）

     ParisGabriel   感谢 大家的支持                                                               每天坚持 一天一篇 点个订 ...

  7. VMware下Linux配置局域网和外网访问

    我想尝试的是利用本机的ip+port来访问虚拟机上的web服务器,因为这样的话,我就能够将我的web服务器部署成为一个能让外网访问的服务器了,首先说下我的环境: 主机:系统win7,ip地址172.1 ...

  8. 转：sift算法详解

    转自:http://blog.csdn.net/pi9nc/article/details/23302075 对于初学者,从David G.Lowe的论文到实现,有许多鸿沟,本文帮你跨越. 1.SIF ...

  9. HttpRuntime.Cache再学习

    摘抄: 可以看到:读缓存,其实是在调用Get方法,而写缓存则是在调用Insert方法的最简单的那个重载版本. 注意了:Add方法也可以将一个对象放入缓存,这个方法有7个参数,而Insert也有一个签名 ...

  10. poj 3080 kmp求解多个字符串的最长公共字串，（数据小，有点小暴力 16ms）

    Blue Jeans Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 14113   Accepted: 6260 Descr ...