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. squoosh

    谷歌在线压缩图片

  2. 【原创】大叔经验分享（61）kudu rebalance报错

    kudu rebalance命令报错 terminate called after throwing an instance of 'std::regex_error' what(): regex_e ...

  3. 【zhifu】web开发中的支付宝支付和微信支付

    一.支付类型: 支付宝支付: 支付宝app内的网页支付: app外(即普通浏览器)网页支付: 微信支付: 微信app内的支付(在这里叫公众号支付) app外的支付(微信H5支付): 微信公众号的支付宝 ...

  4. CF10D-LCIS题解--线性DP+打印方案

    题目链接: https://www.luogu.org/problemnew/show/CF10D 方法一 分析 \(LCS\)和\(LIS\)已经成烂大街的知识了,可是当这两个合并起来成为\(LCI ...

  5. 如何解决windows 80端口被占用的情况

    window下如果在安装某个软件或者启动tomcat时 会遇到80端口被占用的情况,通过命令 netstat -ano 查看端口被占用情况 找到占用80端口的进程ID,然后我们在任务管理器当中将这个进 ...

  6. warning C4819 的解决方法

    编译VC++程序的时候出现如下提示警告: warning C4819: The file contains a character that cannot be represented in the ...

  7. 2.OR Mapping 介绍

    定义: ORM(Object Relational Mapping) -- 是一种为了解决面向对象与关系型数据库存在的互不匹配的现象的技术. 简单说:ORM是通过使用描述对象和数据库之间的映射的元数据 ...

  8. 04.ZabbixWEB网站监控

    1.Web场景监测概述 1.Web网站中什么是动态网站,什么是静态网站 静态网站:纯静态网站就是服务器的源代码和客户端的源代码一致. 动态网站:比如: <?php phpinfo()?> ...

  9. 基于Linux解决登录ssh客户端失败问题—sshd error: could not load host key

    当你ssh远程登录时,会发现ssh登录界面刚打开就会闪退,在查看主机日志消息中,就会看到如下错误: 然而问题的根源也就是这三个文件,无法正常加载ssh主机密钥. 而我们只需要将有问题的文件删除,然后重 ...

  10. Linux学习--第九天--du、df、fsck、dumpe2fs、mount、NTFS-3G、fdisk、partprobe、/etc/fstab、free、mkswap、swapon

    分区类型 主分区:最多只能分四个 扩展分区:只能有一个,如果有了扩展分区,主分区只能有三个.扩展分区不能格式化和存储数据,再划分为逻辑分区才能进行相应操作. 逻辑分区:IDE硬盘,linux最多支持5 ...