组件注册：

// 注册组件

Vue.component('my-component', {

  template: '<div>A custom component!</div>'

})

注册局部组件

var childComponent = Vue.extend({

        template: '<p>this is child template</p>'

    });

Vue.component("parent",{

        template: '<div><p>this is parent template</p><child></child></div>',

        components: {

            'child': childComponent,//child只能在父组件里使用

        }

    });

完整的html代码：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<script src="https://npmcdn.com/vue/dist/vue.js"></script>

<title>vue-demo</title>

</head>

<body>

<h1>vue父子组件嵌套示例</h1>

<div id='app'>

  <my-component></my-component>

  <parent></parent>

</div>

</body>

<script>

// 注册组件

Vue.component('my-component', {

  template: '<div>A custom component!</div>'

})

// 子组件

var childComponent = Vue.extend({

        template: '<p>this is child template</p>'

    });

// 父组件
Vue.component("parent",{

        template: '<div><p>this is parent template</p><child></child></div>',

        components: {

            'child': childComponent,

        }

    });

new Vue({

  el: '#app',

  data: {

      }

})

</script>

</html>

注意，组件只能有一个根元素，所以最好使用一个div元素包裹组件模板，否则会提示错误：Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.

以下是错误的：

Vue.component("parent",{

        template: '<div><p>this is parent template</p></div><child></child>',//组件有多个根元素

        components: {

            'child': childComponent,

        }

    });

也可以使用非字符串模板注册组件，如下：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<script src="https://npmcdn.com/vue/dist/vue.js"></script>

<title>vue-demo</title>

</head>

<body>

    <h1>vue父子组件嵌套示例</h1>

<template id="child">

    <p>this is child template</p>

</template>

<template id="parent">

    <div>

        <p>this is parent template</p>

        <child></child>

    </div>

</template>

<div id="app">

    <parent></parent>

</div>

<script src="vue.js"></script>

<script>

    var childComponent = Vue.extend({

        template: '#child'

    });

    Vue.component("parent",{

        template: '#parent',

        components: {

            'child': childComponent,

        }

    });

    var app = new Vue({

        el: '#app'

    });

</script>

</body>

</html>

效果是一样的。

（完）

vue-父子组件嵌套的示例的更多相关文章

  1. vue父子组件嵌套的时候遇到 - Component template should contain exactly one root element. If you are using v-i

    转自:https://blog.csdn.net/yangyiboshigou/article/details/72084619

  2. vue父子组件

    vue父子组件 新建 模板 小书匠  为什么要厘清哪个是父组件,哪个是子组件? 一开始浏览器接收和要显示的数据非常少,此时无需划分区域进行布局.随着页面数据量的增加,如果单纯一个窗口来加载和显示数据, ...

  3. vue父子组件之间传值

    vue父子组件进行传值 vue中的父子组件,什么是父组件什么是子组件呢?就跟html标签一样,谁包裹着谁谁就是父组件,被包裹的元素就是子组件. 父组件向子组件传值 下面用的script引入的方式,那种 ...

  4. vue父子组件的传值总结

    久违的博客园我又回来了.此篇文章写得是vue父子组件的传值,虽然网上已经有很多了.写此文章的目的就是记录下个人学习的一部分.接下来我们就进入主题吧! 在开发vue项目中,父子组件的传值是避免不掉的. ...

  5. 【转】vue父子组件之间的通信

    vue父子组件之间的通信 在vue组件通信中其中最常见通信方式就是父子组件之中的通性,而父子组件的设定方式在不同情况下又各有不同.最常见的就是父组件为控制组件子组件为视图组件.父组件传递数据给子组件使 ...

  6. Vue父子组件生命周期

    转载自:https://blog.csdn.net/a8725585/article/details/79092505 vue父子组件钩子函数触发顺序 beforeMount后mounted前构造子组 ...

  7. vue父子组件传值加例子

    例子:http://element-cn.eleme.io/#/zh-CN/component/form         上进行改的 父传子:用prop:子组件能够改变父组件的值,是共享的,和父操作是 ...

  8. vue 父子组件通信详解

    这是一篇详细讲解vue父子组件之间通信的文章,初始学习vue的时候,总是搞不清楚几个情况 通过props在父子组件传值时,v-bind:data="data",props接收的到底 ...

  9. vue组件定义方式，vue父子组件间的传值

    vue组件定义方式,vue父子组件间的传值 <!DOCTYPE html> <html lang="zh-cn"> <head> <met ...

随机推荐

  1. TCP头部分析与确认号的理解

    1.TCP的特点: 基于字节流面向连接可靠传输缓冲传输全双工流量控制 2.头部格式和说明 图源百度.如下图示,就是TCP包的头部结构.可以看到这个头部最少有4x5=20个字节. 另外还需要理解TCP协 ...

  2. poj 2570 Fiber Network(floyd)

    #include<stdio.h> #include<string.h> #include<algorithm> using namespace std; int ...

  3. 【分享】iTOP4412开发板-Bluetooth移植文档

    [分享]iTOP4412开发板-Bluetooth移植文档 最近须要把Bluetooth移植到iTOP-4412 开发平台.查阅了相关资料,经过一段时间的研究.调试,最终成功的将蓝牙功能移植到了开发板 ...

  4. vim配置分享(持续更新中)

    作者:zhanhailiang 日期:2014-10-24 set nocompatible set nu   "" 自己主动缩进 syntax on set autoindent ...

  5. 深入理解javascript函数进阶系列第四篇——惰性函数

    前面的话 惰性函数表示函数执行的分支只会在函数第一次调用的时候执行,在第一次调用过程中,该函数会被覆盖为另一个按照合适方式执行的函数,这样任何对原函数的调用就不用再经过执行的分支了.本文将详细介绍惰性 ...

  6. 你为什么还坚持.NET

    C#换什么比较合适? 从TIOBE来看,Java.C++.C.Python都好,对了,还不能忘了JS. Sql Server换什么比较合适? MySql挺好,Oracle也不错,也还有不少选择. 都挺 ...

  7. JavaSe：Comparator

    今天,公司里有一个萌萌的妹子问我java 中的comparator是怎么回事.参数分别是什么,返回值又是什么,为此,我写了一个简单的程序告诉了她: public static void main (S ...

  8. Python 项目实践二（生成数据）第一篇

    上面那个小游戏教程写不下去了,以后再写吧,今天学点新东西,了解的越多,发现python越强大啊! 数据可视化指的是通过可视化表示来探索数据,它与数据挖掘紧密相关,而数据挖掘指的是使用代码来探索数据集的 ...

  9. 数据分析与展示——Pandas数据特征分析

    Pandas数据特征分析 数据的排序 将一组数据通过摘要(有损地提取数据特征的过程)的方式,可以获得基本统计(含排序).分布/累计统计.数据特征(相关性.周期性等).数据挖掘(形成知识). .sort ...

  10. 创建access数据库表demo的封装

    1.创建类 public void CreateBiao(ADOX.Catalog catlog,ADOX.Table table) { //StuId Column(AutoIncrement ) ...