Vue组件　　传送门

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

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

　　　　Vue实例 -- 根组件 root

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

　　　　　　　　 component-b -- 子组件

　　目录结构

　　

　　简单的通过在父组件调用子组件，但父组件的值是无法直接传递给子组件

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>Gary</title>

    </head>

    <body>

        <div id="GaryId">

            <father-component></father-component>

        </div>

    </body>

<template id="father-template">

        <div>

            <h1>father component</h1>

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

            <hr />

            <child-component></child-component>

        </div>

    </template>

    <template id="child-template">

        <div>

            <h2>child component</h2>

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

        </div>

    </template>

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

    <script type="text/javascript">

        new Vue({

            data : {

            },

            components : {

                "father-component" : {

                    data(){

                        return {

                            name : 'Gary'

                        }

                    },

                    template :  "#father-template",

                    components : {

                        "child-component" : {

                            template : "#child-template"

                        }

                    }

                }

            }

        }).$mount("#GaryId");

    </script>

</html>

Gary_fatherAndChild.html

实现过程

　　在<body>中通过<div>调用父组件<father-component>去调用子组件<child-component>

    <body>

        <div id="GaryId">

            <father-component></father-component>

        </div>

    </body>

　　父子组建，在父组件与子组件中分别调用父组件data()域中的值

<template id="father-template">

        <div>

            <h1>father component</h1>

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

            <hr />

            <child-component></child-component>

        </div>

    </template>

    <template id="child-template">

        <div>

            <h2>child component</h2>

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

        </div>

    </template>

　　在Vue中子组件嵌套在父组件当中，其中给父组件name属性赋值"Gary"

            components : {

                "father-component" : {

                    data(){

                        return {

                            name : 'Gary'

                        }

                    },

                    template :  "#father-template",

                    components : {

                        "child-component" : {

                            template : "#child-template"

                        }

                    }

                }

            }

Vue_(组件通讯)父子组件简单关系的更多相关文章

  1. 简述在Vue脚手架中，组件以及父子组件（非父子组件）之间的传值

    1.组件的定义 组成: template:包裹HTML模板片段(反映了数据与最终呈现给用户视图之间的映射关系) 只支持单个template标签: 支持lang配置多种模板语法: script:配置Vu ...

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

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

  3. 总结Vue第二天：自定义子组件、父子组件通信、插槽

    总结Vue第二天:自定义子组件.父子组件通信.插槽 一.组件: 组件目录 1.注册组件(全局组件.局部组件和小demo) 2.组件数据存放 3.父子组件通信(父级向子级传递数据.子级向父级传递数据) ...

  4. Vue_(组件通讯)子组件向父组件传值

    Vue组件 传送门 子组件向父组件传值:子组件通过$.emit()方法以事件形式向父组件发送消息传值: 使用步骤: 1.定义组件:现有自定义组件com-a.com-b,com-a是com-b的父组件: ...

  5. Vue_(组件通讯)父组件向子组件传值

    Vue组件 传送门 父组件向子组件传值:父组件通过属性向下传值的方式和子组件通信: 使用步骤: 1.定义组件:现有自定义组件com-a.com-b,com-a是com-b的父组件 2.准备获取数据:c ...

  6. Vue_(组件通讯)动态组件结合keep-alive

    keep-alive 传送门 <keep-alive> 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们.和 <transition> 相似,<keep-alive ...

  7. vue.js单文件组件中非父子组件的传值

    最近在研究vue.js,总体来说还算可以,但是在web开发群里有一些人问在单文件组件开发模式中非父子组件如何传值的问题,今天在这里讲讲,希望对大家有所帮助! 在官网api中的这段讲解很少,也很模糊:官 ...

  8. Vue（2）- v-model、局部组件和全局组件、父子组件传值、平行组件传值

    一.表单输入绑定(v-model 指令) 可以用 v-model 指令在表单 <input>.<textarea> 及 <select> 元素上创建双向数据绑定. ...

  9. Vue 2 --v-model、局部组件和全局组件、父子组件传值、平行组件传值

    一.表单输入绑定(v-model 指令) 可以用 v-model 指令在表单 <input>.<textarea> 及 <select> 元素上创建双向数据绑定. ...

随机推荐

  1. SharePoint 创建母版页

    一.前言 文章成体系,如果有不明白的地方请查看前面的文章. 二.目录 1.创建HTML页面 2.将HTML文件转换为SharePoint母版页 3.在 SPD中修改母版页“PlaceHolderMai ...

  2. 洛谷UVA11987Almost Union-Find题解--并查集的删除

    题目链接 https://www.luogu.org/problemnew/show/UVA11987 分析 分析下操作发现就是加了个删除操作的并查集,怎么做删除操作呢. 我们用一个\(id[]\)记 ...

  3. 查找和杀掉占用GPU显存的进程

    用只有2个G的显卡跑数据就需要在训练之前先把无关进程杀掉,防止跑到一半显存满了 nvidia-smi:显示当前GPU中的线程 kill -9 PID:输入PID以结束线程

  4. http请求204

    项目中发现一个奇怪的问题,请求的时候同一个接口有两个请求,而且有一个状态为204,有一个为200 在网上查看资料后得知,是因为跨域而引起的,OPTIONS是一种“预检请求”,浏览器在处理跨域访问的请求 ...

  5. webpack的postcss的基本应用

    PostCss是什么? PostCSS在webpack中的基本应用 一.PostCss是什么? 如果有深入学习PostCss需求的话可以参考大漠的资料:https://www.w3cplus.com/ ...

  6. app hellocharts 柱状图

    app里有个告警数量的柱状图,有点小问题,y轴竟然不是整数 这个改起来到是简单 Axis yAxis = new Axis().setHasLines(true).setTextColor(Color ...

  7. docker 批量删除含有同样名字的images

    docker rmi --force $(docker images | grep doss-api | awk '{print $3}') docker rmi  $(docker images | ...

  8. Delphi MSCom安装

  9. python中的负数取模问题(一个大坑)

    先来看一段代码 这是什么情况?为什么会出现这种结果.我们再来看看其它语言的执行结果 我们用golang.js.c分别算了一下,结果得到的结果都是一致的,但是python为啥不一样呢? 其实之所以这么做 ...

  10. servlet遇到的问题

    1 创建web项目没有xml自动生成 2  servlet 忽然报奇怪500错误  出现的BUG原因 JAVA bean没有设置  自动导入了其他User包