组件注册：

// 注册组件

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. java实现导出Excel(跨行，跨列)

    先来个最终结果样式: 第一步: 传参,后期可根据自己需要进行调整.我这里需要的是 quarter 代表季度 dptid 部门编号根据接受过来的参数进行文档命名. UserInfo userInfo=( ...

  2. 使用AOP记录应用调用链开销

    最近系统出现了一次线上的性能问题,本来以为目前的QPS应该是不会出现任何问题的,结果微服务还是比较容易因为某个点的问题导致雪崩的...出了性能问题就要做分析,正统的思路是要不断进行压测用JProfil ...

  3. hdoj 1251 统计难题 【字典树】

    统计难题 Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 131070/65535 K (Java/Others) Total Subm ...

  4. LintCode-丑数

    设计一个算法.找出仅仅含素因子3,5,7 的第 k 大的数. 符合条件的数如:3.5.7,9,15...... 您在真实的面试中是否遇到过这个题? Yes 例子 假设k=4, 返回 9 挑战 要求时间 ...

  5. cs231n --- 1：线性svm与softmax

    cs231n:线性svm与softmax 参数信息: 权重 W:(D,C) 训练集 X:(N,D),标签 y:(N,1) 偏置量bias b:(C,1) N:训练样本数:  D:样本Xi 的特征维度, ...

  6. Iframe 自适应高度

    网页中,经常遇见嵌套问题.我们怎么解决好点,我个人喜欢使用 Html 中的 Iframe 标签.忘记在哪里找的代码了. Iframe 的代码: <iframe src="indexpa ...

  7. 【java】io流之字节输出流：java.io.OutputStream类及子类java.io.FileOutputStream

    package 文件操作; import java.io.File; import java.io.FileOutputStream; import java.io.IOException; impo ...

  8. 【python】函数闭包

    列表时可以改

  9. APP闪退问题

    1.iOS-中app启动闪退的原因 2.iOS开发-闪退问题-解决之前上架的 App 在 iOS 9 会闪退问题 3.iOS-应用闪退总结 4.iOS开发-捕获程序崩溃日志 5.iOS开发-应用崩溃日 ...

  10. Hybris 项目工程配置

    1.控制台页面进入platform目录 cd F:\hybris640\hybris\bin\platform 并运行 setantenv.bat 生成对应的ant. 2.运行 ant moduleg ...