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. Pycharm有必要改的几个默认设置项以及快捷键

    最近在用Pycharm学习Python的时候,总有两个地方感觉不是很舒服,比如调用方法的时候区分大小写(thread就不会出现Thread,string就不会出现String)等,这让我稍稍有点不舒服 ...

  2. HTML的学习（注释）

    <!--charset 编码字符集--> <!--UTF-8 万国码 gb2312 中国标准第2312条 中文,韩文....大部分的亚裔语言(繁体字不支持) GBK 在上面的基础之上 ...

  3. WinForm - 不用自绘实现仿QQ2013

    素材啥的都是一手整理的,绝对的原创.这是13年做的,虽然是个老项目了,可里面涉及的winform技术不会过时,所以就拿出来重温探讨下技术要点. 没使用任何自绘命令,可以说是非常容易理解与学习的. 效果 ...

  4. 第五篇python进阶之深浅拷贝

    目录 第五篇python进阶之深浅拷贝 一.引言 1.1可变 和不可变 二.拷贝(只针对可变数据类型) 三.浅拷贝 四.深拷贝 第五篇python进阶之深浅拷贝 一.引言 1.1可变 和不可变 id不 ...

  5. 【转】Linux设置和查看环境变量的方法

    转: http://www.jb51.net/LINUXjishu/77524.html 1. 显示环境变量HOME $ echo $HOME /home/redbooks 2. 设置一个新的环境变量 ...

  6. 【网络协议】ARP地址解析协议

    地址解析协议ARP 在以太网协议中规定,同一局域网中的一台主机要和另一台主机进行直接通信,必须要知道目标主机的MAC地址.而在TCP/IP协议中,网络层和传输层只关心目标主机的IP地址.这就导致在以太 ...

  7. 使用函数rand5()来实现函数rand7()

    题目: 给定一个函数rand5(),该函数可以随机生成1-5的整数,且生成概率一样.现要求使用该函数构造函数rand7(),使函数rand7()可以随机等概率的生成1-7的整数. 思路: 很多人的第一 ...

  8. java-Freemarker-模板引擎学习

    博客:Java模板引擎性能对比  Thymeleaf性能偏低. 博客:Java模板引擎 FreeMarker   综合性的介绍,内容有点粗糙. 博客:JavaEE进阶——FreeMarker模板引擎 ...

  9. moment.js 使用方法记录

    操作 设值/赋值 1. 具体方法. 1)毫秒(millisecond) moment().millisecond(Number); moment().millisecond(); // Number ...

  10. Rectangle Puzzle CodeForces - 281C （几何）

    You are given two rectangles on a plane. The centers of both rectangles are located in the origin of ...