在Vue的组件内也可以定义组件，这种关系成为父子组件的关系；

如果在一个Vue实例中定义了component-a，然后在component-a中定义了component-b，那他们的关系就是：

Vue实例 -- 根组件 root component-a – 相对于root 这是子组件，相对于component-b这是 父组件 component-b -- 子组件

示例：

当把代码写在如图所示的位置会出现这样的错误

出现的错误显示：

错误显示<child-component>未定义

当把<child-component></child-component>放在如图所示的位置，还会出现这样的错误：

显示的错误：

错误显示的是在一个组件中只能有一个根节点，

解决方案，使组件只有一个根节点，正确结果显示

代码截图：

完整代码：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>父子组件之间的通信</title>

        <script type="text/javascript" src="../js/vue.js" ></script>

    </head>

    <body>

        <div>

            <father-component></father-component>

            </div>

    </body>

    <template id="father-template">

        <div>

        <h2> 父组件</h2>

        <hr />

      <child-component></child-component>

        </div>

    </template>

    <template id="child-template">

        <div>

            <p> 子组件</p>

        </div>

</template>

    <script>

        new Vue({

            components:{

                    "father-component":{

                        template:'#father-template',

                        components:{

                            "child-component":{

                                template:'#child-template'

                            }

                        }

                    }

                }

        }).$mount('div');

    </script>

</html>

初始时，在父组件中定义一个数据：

显示如下：

代码如下：

<template id="father-template">

        <div>

        <h2> 父组件</h2>

        username:<span>{{name}}</span>

        <hr />

      <child-component></child-component>

        </div>

    </template>

    <template id="child-template">

        <div>

            <p> 子组件</p>

        </div>

</template>

    <script>

        new Vue({

            components:{

                    "father-component":{

                        data(){

                            return{

                                name:'perfect'

                            }

                        },

                        template:'#father-template',

                        components:{

                            "child-component":{

                                template:'#child-template'

                            }

                        }

                    }

                }

        }).$mount('div');

    </script>

如想在子组件中进行使用父组件的数据时：

会出现这样的错误：

出现该错误的代码：

<template id="child-template">

        <div>

            <p> 子组件</p>

            fatherData:<span>{{name}}</span>

        </div>

</template>

由该错误可知，即使两个组件是父子关系，但是他们的数据时独立的，如果需要使他们能共用数据，需要使它们通信，在下面的博文中，我会介绍它们如何去进行通信的。

Vue 组件&组件之间的通信 父子组件的通信的更多相关文章

  1. 第四节：Vue表单标签和组件的基本用法，父子组件间的通信

    vue表单标签和组件的基本用法,父子组件间的通信,直接看例子吧. <!DOCTYPE html> <html> <head> <meta charset=&q ...

  2. Vue（二十六）父子组件通信

    今天写了一个分页公共组件,就出现了父子组件通信的问题,今天来总结下我遇到的父子组件通信问题 一.子组件调取父组件的数据或方法 (1)props 想要把父组件的值,传到子组件中,使用props 比如你在 ...

  3. react第六单元(react组件通信-父子组件通信-子父组件通信-跨级组件的传参方式-context方式的传参)

    第六单元(react组件通信-父子组件通信-子父组件通信-跨级组件的传参方式-context方式的传参) #课程目标 1.梳理react组件之间的关系 2.掌握父子传值的方法 3.掌握子父传值的方法 ...

  4. vue 自定义组件 v-model双向绑定、 父子组件同步通信

    父子组件通信,都是单项的,很多时候需要双向通信.方法如下: 1.父组件使用:msg.sync="aa"  子组件使用$emit('update:msg', 'msg改变后的值xxx ...

  5. vue 自定义组件 v-model双向绑定、 父子组件同步通信【转】

    父子组件通信,都是单项的,很多时候需要双向通信.方法如下: 1.父组件使用:msg.sync="aa"  子组件使用$emit('update:msg', 'msg改变后的值xxx ...

  6. vue组件命名和传值 and 父子组件传值

    https://www.cnblogs.com/lianxisheng/p/10907350.html

  7. Vue 非父子组件通信

    组件是Vue核心的一块内容,组件之间的通信也是很基本的开发需求.组件通信又包括父组件向子组件传数据,子组件向父组件传数据,非父子组件间的通信.前两种通信Vue的文档都说的很清楚,但是第三种文档上确只有 ...

  8. 三大前端框架（react、vue、angular2+）父子组件通信总结

    公司业务需要,react.vue.angular都有接触[\无奈脸].虽然说可以拓展知识广度,但是在深度上很让人头疼.最近没事的时候回忆各框架父子组件通信,发现很模糊,于是乎稍微做了一下功课,记录于此 ...

  9. Vue(基础四)_总结五种父子组件之间的通信方式

    一.前言 这篇文章主要总结了几种通信方式: 1.方式一:使用props: [ ]和$emit()  (适用于单层通信) 2.方式二:$attrs和$listeners(适用于多层) 3.方式三:中央处 ...

随机推荐

  1. Linux 命令分类学习

    Linux常用命令大全(非常全!!!) 系统信息 arch 显示机器的处理器架构(1) uname -m 显示机器的处理器架构(2) uname -r 显示正在使用的内核版本 dmidecode -q ...

  2. PAT甲级1091 Acute Stroke【三维bfs】

    题目:https://pintia.cn/problem-sets/994805342720868352/problems/994805375457411072 题意: 求三维的连通块 思路: 简单b ...

  3. 电子产品使用感受之——为什么我把Apple Watch S2 升级到了 S4？

    2019.03.14 更新 最近在手表上安装了“摩拜单车”的APP,这绝对是一款使用体验加分的APP. 我每天上下班都要骑摩拜单车,但是每次掏出手机,首先FACE ID解锁屏幕,然后从上往下滑屏幕来触 ...

  4. centos开启防火墙

    https://www.cnblogs.com/oskyhg/p/8011001.html

  5. java_基础_static{}语句块

    static{}语句块会在类被加载的时候当且仅当执行一次,一般用于初始化变量和调用静态方法 Class.forName(“类名”);方法执行时会加载类 外界调用类中静态变量是不会加载类的,也就是说,如 ...

  6. lua 操作redis

    Redis在2.6推出了脚本功能,允许开发者使用Lua语言编写脚本传到Redis中执行.使用脚本的好处如下: 1.减少网络开销:本来5次网络请求的操作,可以用一个请求完成,原先5次请求的逻辑放在red ...

  7. 理解npm run

    引言 ReactNative 开发中经常用到一些npm run的命令来打包.最近在这上面踩了一个坑,所以研究了一下. 在阅文做了两个ReactNative混合开发的项目,都用npm run bundl ...

  8. es6 中的 symbol

    symbol 的引入是为了解决对象中的属性名冲突的问题 使用symbol() 函数生成的变量值不与任何的变量值相等,  所有用改变量的值做属性名是不会冲突的 symbol 可以转化为字符串, 可以转化 ...

  9. 刀客139qq算命

    https://www.zhouyi.cc/bazi/sm/BaZi.php 好的算命网站 根据辛亥时看出来的午亥暗合没那么简单他不克你她太弱了婚姻不顺,是因为夫妻宫是财坏印是要比劫克财克财很重要 出 ...

  10. 2018-2019-2 网络对抗技术 20165317 Exp3 免杀原理与实践

    2018-2019-2 网络对抗技术 20165317 Exp3 免杀原理与实践 实验内容 任务一:正确使用msf编码器,msfvenom生成如jar之类的其他文件,veil-evasion,自己利用 ...