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. MVC进阶讲解+小技巧-乱七八糟

    开发步骤 1.建立项目 2.建立文件夹 3.建立Controllers 4.生成页面 5.编写Html+Js 6.编写异步请求的Action的方法,返回部分页(用于分页) 7.Js中显示部分页 8.增 ...

  2. Java 串口通信 Ubuntu

    说一下我的操作过程吧 在Windows上先用阿猫串口网络调试助手,进行调试: 在网上找Java代码,我选择的是RXTXcomm,网上代码很多,基本都一样. 在Windows电脑上把rxtx压缩包中的r ...

  3. HTML学习记录和总结

    版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明. 作者:struct_mooc 博客地址:https://www.cnblogs.com/stru ...

  4. vue页面中图片不显示解决

    在做新版组态界面的时候,用vue框架实现,在配置页面图片的时候发现有一张图片明明页面输入的路径是对的可是图片就是不显示出来 现象: network页面资源也不报错,而且状态码竟然还是200,点prev ...

  5. 使用WSGI创建REST接口

    问题 你想使用一个简单的REST接口通过网络远程控制或访问你的应用程序,但是你又不想自己去安装一个完整的web框架. 解决方案 构建一个REST风格的接口最简单的方法是创建一个基于WSGI标准(PEP ...

  6. 【转】tar命令详解

    原文:http://www.cnblogs.com/qq78292959/archive/2011/07/06/2099427.html tar -c: 建立压缩档案-x:解压-t:查看内容-r:向压 ...

  7. -bash: ls: No such file or directory 错误的原因及解决办法

    ubuntu出现如下错误: { Welcome to Ubuntu 16.04.5 LTS (GNU/Linux 4.15.0-42-generic x86_64) * Documentation: ...

  8. 注解【Annotation】、反射

    注解:Annotation是从JDK5.0开始引入的新技术.Annotation的作用:如果没有注解信息处理流程,则注解毫无意义)- 不是程序本身,可以对程序作出解释.(这一点,跟注释没什么区别)- ...

  9. Hive（七）Hive参数操作和运行方式

    Hive参数操作和运行方式 1.Hive参数操作 1.hive参数介绍 ​ hive当中的参数.变量都是以命名空间开头的,详情如下表所示: 命名空间 读写权限 含义 hiveconf 可读写 hive ...

  10. Cubase如何进行音频移调