当前位置: 首页 > news >正文

Vue:Vue与VueComponent的关系图

在这里插入图片描述
1.一个重要的内置关系:VueComponent.prototype.proto === Vue.prototype
2.为什么要有这个关系:让组件实例对象(vc)可以访问到 Vue原型上的属性、方法。

案例证明:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>一个重要的内置关系</title><!-- 引入Vue --><script type="text/javascript" src="../js/vue.js"></script>
</head>
<body><div id="root"><school></school></div>
</body><script>Vue.prototype.x = 99;        //Vue原型上添加一个属性x//创建school组件const school = Vue.extend({name:'school',template:`<div><h2>学校名称:{{schoolName}}</h2><h2>学校地址:{{address}}</h2><button @click="showX">点我输出x</button></div>`,data(){return {schoolName:'尚硅谷',address:'北京昌平'}},methods: {showX(){console.log(this.x);	//此处就可以拿到Vue身上的x}}});const vm = new Vue({el:"#root",components:{school}});</script>
</html>
http://www.lryc.cn/news/271652.html

相关文章:

  • Elasticsearch8集群部署
  • 【小白专用】c# 如何获取项目的根目录
  • 【PXIE301-208】基于PXIE总线架构的Serial RapidIO总线通讯协议仿真卡
  • 软件测试/测试开发丨Windows系统chromedriver安装与环境变量配置
  • 【vim 学习系列文章 3.1 -- vim 删除 ^M】
  • 深入理解 C# 中的字符串比较:String.CompareTo vs String.Equals
  • DevOps持续交付之容器化CICD流水线
  • Linux/Unix/国产化操作系统常用命令(二)
  • 基于SpringBoot的智慧生活商城系统
  • Vue框架引入Axios
  • EasyExcel 通过模板 导入、导出、下载模板
  • SAP ABAP通过代码解锁SM12中被锁定目标<转载>(RFC: ENQUEUE_READ和 ENQUE_DELETE)
  • 跳跃表原理及实现
  • 详解Vue3中的鼠标事件mousemove、mouseover和mouseout
  • Java:socket编程
  • 哨兵1号回波数据(L0级)FDBAQ压缩算法详解
  • 盾构机数据可视化监控平台 | 图扑数字孪生
  • 计算机网络课程设计-企业网三层架构
  • Docker上传镜像到Harbor
  • mfc100u.dll文件丢失了要怎么解决?修复mfc100u.dll详细指南
  • 【ArcGIS微课1000例】0084:甘肃积石山地震震中100km范围内历史灾害点分布图(2005-2020)
  • java SSM拖拉机售后管理系统myeclipse开发mysql数据库springMVC模式java编程计算机网页设计
  • 侯捷C++ 2.0 新特性
  • 计算机网络——基础知识汇总(八)
  • DIA数皆智能客户体验管理CEM获伊利“健康+AI”生态创新大奖
  • linux 休眠唤醒中设备、总线、用户进程、内核线程调试分析流程
  • k8s陈述式资源管理(命令行)
  • 五、HTML 标题
  • 三菱MR-JE伺服脉冲轴应用参数设置
  • 通信原理课设(gec6818) 006:网络编程