VueComponent构造函数

devtools/2024/9/23 0:32:07/
//创建school组件——注册给谁 在谁的结构上写const school = Vue.extend({name: 'school',//开发者工具的显示template: `<div><h2>学校名称:{{schoolName}}</h2><h2>学校地址:{{adress}}</h2>  </div>`,//结构data() {return {//防止相同对象改变schoolName: 'xxxx学校',adress: 'xxx街道',}},//数据
})const vm &#61; new Vue({el: &#39;#root&#39;,template:&#96;&lt;school&gt;&lt;/school&gt;&#96;,//2、注册组件 &#xff08;局部注册&#xff09;components: {school,}});</code></pre> 

定义的组件,是构造函数

每次调用组件的创建 Vue.extend 返回的都是全新的VueComponent的构造函数()

源码分析:每次调用

vm上的$children是组件vc

1、school组件本质是一个VueComponent的构造函数,不是程序员定义的,是Vue.extend生成的

2、我们只需要写 <school></school>或者 </school>,Vue解析的时候会帮我创建school组件的实例对象

即Vue帮我执行new VueComponent(options),使用几次调用几次

3、注意:每次调用组件的创建 Vue.extend 返回的都是全新的VueComponent的构造函数()

4、关于this指向

1、组件配置中

data函数、methods中的函数、watch函数、computed中的函数 this全部指向VueComponent实例对象

2、new Vue(options)配置中

data函数、methods中的函数、watch函数、computed中的函数 this全部指向Vue实例对象5、VueComponent的实例对象简称vc,也即是组件实例对象

Vue实例对象简称vm


http://www.ppmy.cn/devtools/39713.html

相关文章

【比邻智选】MR880A模组

&#x1f680;高性价比&#xff0c;5G/4G双模&#xff0c;稳定可靠 &#x1f310;功能丰富&#xff0c;5G特性一应俱全 &#x1f9e9;多封装兼容&#xff0c;适配性强&#xff0c;灵活升级智能设备

安卓LayoutParams浅析

目录 前言一、使用 LayoutParams 设置宽高二、不设置 LayoutParams2.1 TextView 的 LayoutParams2.2 LinearLayout 的 LayoutParams 三、getLayoutParams 的使用四、setLayoutParams 的作用五、使用 setWidth/setHeight 设置宽高 前言 先来看一个简单的布局&#xff0c;先用 x…

Java 8特性(一) 之 手写Stream流filter、map和forEach方法

Java 8特性&#xff08;一&#xff09; 之 手写Stream流filter、map和forEach方法 今天看了一下Java 8的Stream流&#xff0c;学习了一下函数式编程&#xff0c;这才感受函数式编程如此爽&#xff0c;之前就使用过ES8.7.1的函数式编程&#xff0c;当时就在想啥时候咱也能写出这…

AWS Lambda 第一个例子Hello (JAVA)

什么是Serverless&#xff08;无服务器计算&#xff09; 行业通常所说的Serverless&#xff0c;主要是指“无服务器计算&#xff08;Serverless Computing&#xff09;”。无服务器计算&#xff0c;并不是真的不需要服务器&#xff0c;而是说&#xff0c;对于用户&#xff0c;…

Vue 中 $nextTick 的作用是什么?

目录 一、NextTick是什么 为什么要有nexttick 二、使用场景 三、实现原理 一、NextTick是什么 官方对其的定义 在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法&#xff0c;获取更新后的 DOM 什么意思呢&#xff1f; 我们可以理解成&#xff0c…

瀚高数据库(HighGoDB)Windows安装使用

1.下载 2.安装 瀚高数据库下载与安装&#xff08;Windows版&#xff09;-CSDN博客 3.连接工具 4.建库、建表操作 瀚高数据库管理工具-CSDN博客 *报错Cant access non-default database&#xff0c;需要右键数据库-设为活动对象 5.导入外部数据&#xff08;迁移、对比&…

Microsoft 365 for Mac v16.84 office365全套办公软件

Microsoft 365 for Mac是一款功能丰富的办公软件套件&#xff0c;为Mac用户提供了丰富的功能和工具&#xff0c;提高了工作效率和协作能力。Microsoft 365 for Mac是一款专为Mac用户设计的订阅式办公软件套件&#xff0c;旨在提高生产力和效率。 Microsoft 365 for Mac v16.84正…

智能交通仿真平台介绍

随着城市化进程的加速和汽车不断的增加&#xff0c;交通问题日益突出。为了应对这一挑战&#xff0c;智能交通和自动驾驶技术应运而生。智能交通与自动驾驶技术的结合将改善交通安全和减少拥堵&#xff0c;智能交通系统提供实时路况信息和信号控制&#xff0c;帮助自动驾驶车辆…