vue父子组件

新建 模板 小书匠 

为什么要厘清哪个是父组件，哪个是子组件？

一开始浏览器接收和要显示的数据非常少，此时无需划分区域进行布局。随着页面数据量的增加，如果单纯一个窗口来加载和显示数据，是非常缓慢的。此时将主页面充当父组件中转，分发到子组件，将会大大降低父组件的压力。

你可以想象你开了一个小餐馆，自己可以充当厨师，收银员和后勤进货。当小餐馆逐渐变成大酒店后，一个人是无法再兼任多职了。厨师可能还要分主厨，配菜，热炒，打荷等。这些厨师如果不分清上下级，命令就无法有效抵达。

所以就有必要分清父子组件了，笼统来说，父是包含子的，当然vue也是这样设计组件的。vue实例是最顶级的组件，它的components属性里包含mycpn组件,所以vue是mycpn的父组件，mycpn是vue的子组件。它们之间可以相互传递消息。即上述的酒店模型的上下级指令传达。


当一个组件的components属性里包含另外一个组件时，该组件就是另外组件的父组件

子组件还能有子组件，即当子组件内的components属性包含其他组件时，该子组件为其他组件的父组件。


顶级组件vue的components属性包含mycpn组件,mycpn组件的components属性又包含mychildcpn组件

如果对模板嵌套糊涂的同学请参考模板优化及局部注册组件语法糖等章节进行知识回顾。

请务必理解相关语法糖，为接下来的父子通信做铺垫。

https://www.cnblogs.com/singledogpro/p/12056925.html vue组件化之模板优化及注册组件语法糖

vue父子组件的更多相关文章

  1. vue父子组件之间传值

    vue父子组件进行传值 vue中的父子组件,什么是父组件什么是子组件呢?就跟html标签一样,谁包裹着谁谁就是父组件,被包裹的元素就是子组件. 父组件向子组件传值 下面用的script引入的方式,那种 ...

  2. vue父子组件的传值总结

    久违的博客园我又回来了.此篇文章写得是vue父子组件的传值,虽然网上已经有很多了.写此文章的目的就是记录下个人学习的一部分.接下来我们就进入主题吧! 在开发vue项目中,父子组件的传值是避免不掉的. ...

  3. 【转】vue父子组件之间的通信

    vue父子组件之间的通信 在vue组件通信中其中最常见通信方式就是父子组件之中的通性,而父子组件的设定方式在不同情况下又各有不同.最常见的就是父组件为控制组件子组件为视图组件.父组件传递数据给子组件使 ...

  4. Vue父子组件生命周期

    转载自:https://blog.csdn.net/a8725585/article/details/79092505 vue父子组件钩子函数触发顺序 beforeMount后mounted前构造子组 ...

  5. vue父子组件传值加例子

    例子:http://element-cn.eleme.io/#/zh-CN/component/form         上进行改的 父传子:用prop:子组件能够改变父组件的值,是共享的,和父操作是 ...

  6. vue 父子组件通信详解

    这是一篇详细讲解vue父子组件之间通信的文章,初始学习vue的时候,总是搞不清楚几个情况 通过props在父子组件传值时,v-bind:data="data",props接收的到底 ...

  7. vue组件定义方式，vue父子组件间的传值

    vue组件定义方式,vue父子组件间的传值 <!DOCTYPE html> <html lang="zh-cn"> <head> <met ...

  8. Vue父子组件相互传值及调用方法的方案

    Vue父子组件相互传值及调用方法的方案 一.调用方法: 1.父组件调用子组件方法: 2.子组件调用父组件方法: 参考:https://www.cnblogs.com/jin-zhe/p/9523782 ...

  9. 关于Vue父子组件传值(复杂数据类型的值)的细节点

    vue 父子组件传值是很常见的,多数情况下都是父传递给子的值是基础数据类型,如string,number,boolean, 当父组件值被修改时,子组件能够实时的作出改变. 如果父子传值的类型是复杂数据 ...

随机推荐

  1. 本人亲测-C#常用工具类

    /* * HTTP接口工具类 */ public class HttpUitls { /* * get请求 */ public static string Get(string Url) { //Sy ...

  2. 数据库命令行工具USQL、mycli、litecli、pgcli

    USQL USQL 是一款使用 Go 语言开发的支持 SQL/NoSQL 数据库的通用命令行工具,它支持多种主流的数据库软件,目前最新版本是usql 0.7.0.比如 PostgreSQL.MySQL ...

  3. hdfs 配置文件详解

    – dfs.name.dir – NameNode 元数据存放位置 – 默认值:使用core-site.xml中的hadoop.tmp.dir/dfs/name – dfs.block.size –  ...

  4. 31、NTP时间服务器

    1.NTP简介 NTP服务器顾名思义就是时间同步服务器(Network Time Protocol),Linux下的ntp服务器配置相对来说都比较容易,但在Linux下有一个弊端,不同时区或者说是时间 ...

  5. centos 7 安装 Oracle 12c

    #!/bin/bash #!/usr/bin/expect -f #/etc/sysctl.conf --bash-srcipts-- echo 'net.ipv6.conf.all.disable_ ...

  6. python-装饰器案例1

    python-装饰器案例1 高阶函数+嵌套函数=装饰器 例1: import time def timer(func): def deco(): start_time=time.time() func ...

  7. ansible常用模块详解（三）

    1.模块介绍 明确一点:模块的执行就类似是linux命令的一条命令,就单单的是为了执行一条语句,不是批量的操作,批量操作需要用到playbook内类似shell编写脚本进行批量. 1.1 模块的使用方 ...

  8. ip正则

    IP地址是指互联网协议地址(英语:Internet Protocol Address,又译为网际协议地址),是IP Address的缩写.IP地址是IP协议提供的一种统一的地址格式,它为互联网上的每一 ...

  9. Django学习系列11:在服务器中处理POST请求

    之前的代码还没有为表单指定action=属性,因此提交表单默认返回之前渲染的页面,即“/”,这个由视图函数home_page处理.下面修改这个视图函数,让它能处理POST请求. 这意味着要为视图函数h ...

  10. iptables设置

    一,安装iptables yum -y install iptables-services iptables-devel 二,查看规则 iptables -nL --line-number 三,清空规 ...