组件注册：

// 注册组件

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. 8.5 filecmp--文件和文件夹比較处理

    本模块主要提供了对文件和文件夹进行简单的比較处理,假设须要复杂的文件比較须要使用difflib库来处理. filecmp.cmp(f1, f2, shallow=True) 比較文件f1和文件f2,当 ...

  2. TCP传输中序号与确认序号的交互

    本实验通过SSH远程登录server,然后使用Wireshark抓包分析. 开头的三次握手已经省略.关于序号的交互过程.须要记住一点:TCP首部中的确认序号表示已成功收到字节,但还不包括确认序号所指的 ...

  3. 机器学习——深度学习(Deep Learning)

    Deep Learning是机器学习中一个非常接近AI的领域,其动机在于建立.模拟人脑进行分析学习的神经网络,近期研究了机器学习中一些深度学习的相关知识,本文给出一些非常实用的资料和心得. Key W ...

  4. Android查缺补漏--BroadcastReceiver的类型与使用

    Broadcast 是一种被用于应用内和应用之间传递信息的机制.一个广播可以对应多个接受者.一个完整的广播机制,需要具有以下三个要素: 发送广播的Broadcast 接受广播的BroadcastRec ...

  5. 自学Python5.3-内置模块(1)

    内置模块(1)内置模块是Python自带的功能,在使用内置模块相应的功能时,需要  先导入 再 使用  1.OS模块       用于提供系统级别的操作: os.getcwd() 获取当前工作目录,即 ...

  6. linux应用态下的时间

    1.时间值 1.1 日历时间(UTC) 该值是自1 9 7 0年1月1日0 0 : 0 0 : 0 0以来国际标准时间( U T C)所经过的秒数累计值(早期的手册称 U T C为格林尼治标准时间) ...

  7. div元素宽度不定的情况下如何居中显示

    最近由于工作的原因碰到一个问题,就是在一个弹窗宽度不定的情况下还能是该弹窗居中显示,思考许久未找到合适办法,于是在网上找到一些办法在此总结记录下来方便以后的学习. 方法一:兼容IE67 <div ...

  8. 查看SQL Server当前会话的隔离级别

    查看SQL Server当前会话的隔离级别 DBCC USEROPTIONS

  9. springboot 热部署 idea版本（转）

    spring为开发者提供了一个名为spring-boot-devtools的模块来使Spring Boot应用支持热部署,提高开发者的开发效率,无需手动重启Spring Boot应用. devtool ...

  10. 《算法 (第4版)》【PDF】下载

    <算法 (第4版)>[PDF]下载链接: https://u253469.ctfile.com/fs/253469-231196349 (第4版)>[PDF]"  TITL ...