Vue子组件和根组件的关系
- 代码:
<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子组件和根组件的关系的更多相关文章
- Vue父子组件传值之——访问根组件$root、$parent、$children和$refs
Vue组件传值除了prop和$emit,我们还可以直接获取组件对象: 根组件: $root // 单一对象 表示当前组件树的根 Vue 实例,即new Vue({...根组件内容}).如果当前实例没有 ...
- Vue源码翻译之组件初始化。
废话不多说. 我们先来看看Vue的入口文件. import { initMixin } from './init' import { stateMixin } from './state' impor ...
- Vue(2)- v-model、局部组件和全局组件、父子组件传值、平行组件传值
一.表单输入绑定(v-model 指令) 可以用 v-model 指令在表单 <input>.<textarea> 及 <select> 元素上创建双向数据绑定. ...
- Vue 2 --v-model、局部组件和全局组件、父子组件传值、平行组件传值
一.表单输入绑定(v-model 指令) 可以用 v-model 指令在表单 <input>.<textarea> 及 <select> 元素上创建双向数据绑定. ...
- Vue.js 相关知识(组件)
1. 组件介绍 组件(component),vue.js最强大的功能之一 作用:封装可重用的代码,通常一个组件就是一个功能体,便于在多个地方都能调用该功能体 根组件:我们实例化的Vue对象就是一个组件 ...
- vue项目环境搭建与组件介绍
Vue项目环境搭建 """ node ~~ python:node是用c++编写用来运行js代码的 npm(cnpm) ~~ pip:npm是一个终端应用商城,可以换国内 ...
- Vue学习笔记-Vue.js-2.X 学习(二)===>组件化开发
===重点重点开始 ========================== (三) 组件化开发 1.创建组件构造器: Vue.extends() 2.注册组件: Vue.component() 3.使用 ...
- (day67)组件、组件化、组件传参、JS补充(命名转换、for in 、数据转换)、css取消选中和模拟小手
目录 一.初识组件 (一)概念 (二)特点 二.组件的分类 (一)根组件 (二)局部组件 (三)全局组件 二.数据组件化 三.组件的传参 (一)父传子 (二)子传父 四.JS补充 (一)与html命名 ...
- Vue其他指令-组件-全局-局部-组件的交互父传子
v-once指令 once:一旦,当...时候 <!DOCTYPE html> <html lang="zh"> <head> <meta ...
随机推荐
- 使用远程接口库进一步扩展Robot Framework的测试能力
引言: Robot Framework的四层结构已经极大的提高了它的扩展性.我们可以使用它丰富的扩展库来完成大部分测试工作.可是碰到下面两种情况,仅靠四层结构就不好使了: 1.有些复杂的测试可能跨越多 ...
- JVM内存布局及GC知识
一.JVM运行时内存布局 按java 8虚拟机规范的原始表达:(jvm)Run-Time Data Areas, 暂时翻译为"jvm运行时内存布局". 从概念上大致分为6个(逻辑) ...
- 痞子衡嵌入式:ARM Cortex-M内核那些事(3.2)- 安全模块看特性(M23/33/35P)
大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是ARM Cortex-M功能模块,不过侧重点是三款安全特性处理器. ARM Cortex-M处理器家族发展至今(2020),已有8代产品 ...
- HashMap在JDK7和JDK8中的区别
在[深入浅出集合Map]中,已讲述了HashMap在jdk7中实现,在此就不再细说了 JDK7中的HashMap 基于链表+数组实现,底层维护一个Entry数组 Entry<K,V>[] ...
- 在动作方法中生成输出URL (Generating Outgoing URLs in Action Methods) |
- LeetCode刷题总结-链表
LeetCode刷题总结-链表 一.链表 链表分为单向链表.单向循环链表和双向链表,一下以单向链表为例实现单向链表的节点实现和单链表的基本操作. 单向链表 单向链表也叫单链表,是链表中最简单的 ...
- PKU 1185-炮兵阵地(状压DP)
炮兵阵地 题目链接 Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 34827 Accepted: 13353 Descripti ...
- Docker(一) 简介
简介 Docker是一款针对程序开发人员和系统管理员来开发.部署.运行应用的一款虚拟化平台.Docker 可以让你像使用集装箱一样快速的组合成应用,并且可以像运输标准集装箱一样,尽可能的屏蔽代码层面的 ...
- vsphere部署说明
前言 简单介绍一下vsphere及相关组件: vsphere是VMware公司推出一款虚拟化产品,ESXi与Vcenter是其组成部分:ESXi将物理基础设施虚拟化成虚拟池,Vcenter将ESXi虚 ...
- linux man指令的详解
原创内容,欢迎指正 一.基本操作 大多数linux发行版自带用以查找shell命令及其他GNU工具信息的在线手册,man命令就是用来访问存储在linux系统上的手册页面. 例如,查看ls命令手册,语法 ...