组件注册：

// 注册组件

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. js onmouseover与onmouseout用法

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  2. 用maven搭建java ee项目

    一.开发环境 jdk1.7  tomcat7 eclipse-jee-luna-R-win32 maven2.2.1 二搭建步骤 1.点击File->New->Other,选择maven ...

  3. [每天一个Linux小技巧]　强制让内核按单核模式启动

    在启动參数里追加 nosmp nosmp的说明例如以下: nosmp [SMP] Tells an SMP kernel to act as a UP kernel, and disable the ...

  4. UML总结复习指南

    用例图 1. 參与者(Actor) 表示与您的应用程序或系统进行交互的用户.组织或外部系统.用一个小人表示.   2. 用例(Use Case)   用例就是外部可见的系统功能,对系统提供的服务进行描 ...

  5. java文本编辑器v2.0 图形用户界面

    package 文本编辑器; import java.awt.BorderLayout; import java.awt.Color; import java.awt.Dimension; impor ...

  6. exports 和 module.exports

    首先参考一个js的示例 app.js var a = {name: 'nswbmw 1'}; var b = a; console.log(a); console.log(b); b.name = ' ...

  7. 有限等距性质RIP

    参考博客:http://blog.csdn.net/jbb0523/article/details/44565647 压缩感知测量矩阵之有限等距性质(Restricted Isometry Prope ...

  8. 关于scrapy的piplines

    1.进入setting中把ITEM_piplines文件注销去掉 2.在piplines中写好代码 # -*- coding: utf- -*- # Define your item pipeline ...

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

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

  10. OPENSHIFT V3 免费部署 Java-Web

    OpenShift是红帽的云开发平台即服务(PaaS).自由和开放源码的云计算平台使开发人员能够创建.测试和运行他们的应用程序,并且可以把它们部署到云中.Openshift广泛支持多种编程语言和框架, ...