组件注册：

// 注册组件

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. day3、Linux快捷键及vim命令快捷键

    Linux命令行快捷键 快捷键: tab键  自动补全路径 目录  名字,  自动不全命令 快捷键: ctrl +l(小写) 清屏 . ctrl +c 取消当前操作 快捷键: ctrl +d(小写) ...

  2. admin密码重置方式

    1.在项目根目录下运行:python manage.py shell 2.重设密码 from django.contrib.auth.models import User user =User.obj ...

  3. android动画介绍之 自己定义Animation动画实现qq抖一抖效果

    昨天我们介绍了Animation的基本使用方法.小伙伴们了解的怎么样了?假设还没有了解过Animation的小伙伴能够看看这篇博客 android动画介绍--Animation 实现loading动画 ...

  4. Asp.net mvc 知多少（五）

    本系列主要翻译自<ASP.NET MVC Interview Questions and Answers >- By Shailendra Chauhan,想看英文原版的可访问http:/ ...

  5. 3D Game Programming withDX11 学习笔记（一） 数学知识总结

    在图形学中,数学是不可或缺的一部分,所以本书最开始的部分就是数学知识的复习.在图形学中,最常用的是矢量和矩阵,所以我根据前面三个章节的数学知识,总结一下数学知识. 一.矢量 数学中的矢量,拥有方向和长 ...

  6. Swift 3.0在集合类数据结构上的一些新变化

    一.Array数组的更改 array数组中修改的API示例如下: //创建大量相同元素的数组//创建有10个String类型元素的数组,并且每个元素都为字符串"Hello"//sw ...

  7. VM环境下Linux虚拟机扩展存储空间操作方法总结

    用VMwareware虚拟机安装的 Linux 系统剩余空间不足,造成软件无法正常安装.如果重新装一遍系统就需要重新配置好开发环境和软件的安装配置. 一.空间扩展  (1)打开VMware,选择Edi ...

  8. 用过的关于css的知识

    1.代码片段 让两个div并排起来显示. <div style="width:1000px; text-align:center;" id="content&quo ...

  9. xamarin android checkbox自定义样式

    xamarin android checkbox自定义样式 在drawable文件在新建checkbox_bg.xml文件 <?xml version="1.0" encod ...

  10. Search 命令详解

    *查: ls : 查看文件等信息 /cat: 查看文件只显示最后一页. /cat > filename:创建新文件  /cat file1 file2 > file:合并文件  / -A ...