• 代码:
<script type="text/javascript">
const Foo = Vue.extend({
template: `<div id="testzy">
<div @click="change">test</div>
</div>`,
mounted: function() {
debugger;
},
methods: {
change() {
debugger;
},
}
}); const routes = [{
path: '/foo/:id',
component: Foo
}] const router = new VueRouter({
routes // (缩写)相当于 routes: routes
}) const app = new Vue({
data: {
message: 'father',
msg1: "hello",
show: true
},
router, // (缩写)相当于 router: router
mounted: function() {
debugger;
alert(this.$data.message);
}, }).$mount('#app')
</script>
  • app是Vue对象,也是一个组件,是最上层的根组件,Foo是VueComponent,是根组件里的子组件
  • 运行起来后,app对象里面会有一个叫children的数组,这个数组里面包含了Foo
  • 运行起来后,app和Foo里面都会有一些内置的属性和方法,比如$data,$el,$router等

Vue子组件和根组件的关系的更多相关文章

  1. Vue父子组件传值之——访问根组件$root、$parent、$children和$refs

    Vue组件传值除了prop和$emit,我们还可以直接获取组件对象: 根组件: $root // 单一对象 表示当前组件树的根 Vue 实例,即new Vue({...根组件内容}).如果当前实例没有 ...

  2. Vue源码翻译之组件初始化。

    废话不多说. 我们先来看看Vue的入口文件. import { initMixin } from './init' import { stateMixin } from './state' impor ...

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

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

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

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

  5. Vue.js 相关知识(组件)

    1. 组件介绍 组件(component),vue.js最强大的功能之一 作用:封装可重用的代码,通常一个组件就是一个功能体,便于在多个地方都能调用该功能体 根组件:我们实例化的Vue对象就是一个组件 ...

  6. vue项目环境搭建与组件介绍

    Vue项目环境搭建 """ node ~~ python:node是用c++编写用来运行js代码的 npm(cnpm) ~~ pip:npm是一个终端应用商城,可以换国内 ...

  7. Vue学习笔记-Vue.js-2.X 学习(二)===>组件化开发

    ===重点重点开始 ========================== (三) 组件化开发 1.创建组件构造器: Vue.extends() 2.注册组件: Vue.component() 3.使用 ...

  8. (day67)组件、组件化、组件传参、JS补充(命名转换、for in 、数据转换)、css取消选中和模拟小手

    目录 一.初识组件 (一)概念 (二)特点 二.组件的分类 (一)根组件 (二)局部组件 (三)全局组件 二.数据组件化 三.组件的传参 (一)父传子 (二)子传父 四.JS补充 (一)与html命名 ...

  9. Vue其他指令-组件-全局-局部-组件的交互父传子

    v-once指令 once:一旦,当...时候 <!DOCTYPE html> <html lang="zh"> <head> <meta ...

随机推荐

  1. 使用远程接口库进一步扩展Robot Framework的测试能力

    引言: Robot Framework的四层结构已经极大的提高了它的扩展性.我们可以使用它丰富的扩展库来完成大部分测试工作.可是碰到下面两种情况,仅靠四层结构就不好使了: 1.有些复杂的测试可能跨越多 ...

  2. JVM内存布局及GC知识

    一.JVM运行时内存布局 按java 8虚拟机规范的原始表达:(jvm)Run-Time Data Areas, 暂时翻译为"jvm运行时内存布局". 从概念上大致分为6个(逻辑) ...

  3. 痞子衡嵌入式:ARM Cortex-M内核那些事(3.2)- 安全模块看特性(M23/33/35P)

    大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是ARM Cortex-M功能模块,不过侧重点是三款安全特性处理器. ARM Cortex-M处理器家族发展至今(2020),已有8代产品 ...

  4. HashMap在JDK7和JDK8中的区别

    在[深入浅出集合Map]中,已讲述了HashMap在jdk7中实现,在此就不再细说了 JDK7中的HashMap 基于链表+数组实现,底层维护一个Entry数组 Entry<K,V>[]  ...

  5. 在动作方法中生成输出URL (Generating Outgoing URLs in Action Methods) |

  6. LeetCode刷题总结-链表

    LeetCode刷题总结-链表 一.链表     链表分为单向链表.单向循环链表和双向链表,一下以单向链表为例实现单向链表的节点实现和单链表的基本操作. 单向链表 单向链表也叫单链表,是链表中最简单的 ...

  7. PKU 1185-炮兵阵地(状压DP)

    炮兵阵地 题目链接 Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 34827 Accepted: 13353 Descripti ...

  8. Docker(一) 简介

    简介 Docker是一款针对程序开发人员和系统管理员来开发.部署.运行应用的一款虚拟化平台.Docker 可以让你像使用集装箱一样快速的组合成应用,并且可以像运输标准集装箱一样,尽可能的屏蔽代码层面的 ...

  9. vsphere部署说明

    前言 简单介绍一下vsphere及相关组件: vsphere是VMware公司推出一款虚拟化产品,ESXi与Vcenter是其组成部分:ESXi将物理基础设施虚拟化成虚拟池,Vcenter将ESXi虚 ...

  10. linux man指令的详解

    原创内容,欢迎指正 一.基本操作 大多数linux发行版自带用以查找shell命令及其他GNU工具信息的在线手册,man命令就是用来访问存储在linux系统上的手册页面. 例如,查看ls命令手册,语法 ...