Vue:Vue与VueComponent的关系图

news2024/11/26 9:37:24

在这里插入图片描述
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.coloradmin.cn/o/1349734.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

TDD-LTE 附着流程和去附着流程

目录 1. 附着流程 1.1. 正常附着流程 2. 异常附着流程 2.1 RRC建立失败 2.2 核心网拒绝 2.3 eNodeB未收到初始化上下文建立请求 2.4 RRC重配置请求丢失 2. 去附着流程 2.1 非关机去附着流程 2.1.1 连接态非关机去附着 2.1.2 空闲态非关机去附着 2.2 关机去附着流程 …

小肥柴慢慢手写数据结构(C篇)(5-2 AVL树)

小肥柴慢慢学习数据结构笔记&#xff08;C篇&#xff09;&#xff08;5-2 AVL树 目录5-5 AVL出现的原因5-5-1 平衡树5-5-2 平衡二叉树的具体案例 5-6 AVL平衡策略的讨论5-7 不使用平衡因子的实现&#xff08;黑皮书&#xff0c;训练思维&#xff09;5-8 使用平衡因子的实现&…

Matplotlib_4.文字图例尽眉目

文章目录 一、Figure和Axes上的文本1.text2.title和set_title3.figtext和text4.suptitle5.xlabel和ylabel6.annotate7.字体的属性设置 二、Tick上的文本1.简单模式2.Tick Locators and Formatters 三、legend&#xff08;图例&#xff09; 一、Figure和Axes上的文本 Matplotli…

linux 的直接direct io

目录 什么是 Direct IO java 支持 使用场景 数据库 反思 在之前的文章零拷贝基础上&#xff0c;有一个针对那些不需要在操作系统的 page cache 里保存的情况&#xff0c;即绕过 page cache&#xff0c;对于 linux 提供了 direct io 的功能。 https://blog.csdn.net/zlpzl…

2024年第一天,先送一波福利!

▼最近直播超级多&#xff0c;预约保你有收获 近期直播&#xff1a;《LLM在电商搜索系统的应用案例实战》 —1— 2024 AIGC 技术体系领取福利 2023年是当之无愧的生成式 AI 元年&#xff0c;AIGC 的崛起深刻改变了我们的工作和生活&#xff0c;让我们看到了未来无限的可能性&am…

TDD-LTE 寻呼流程

目录 1. 寻呼成功流程 1.1 空闲态寻呼 1.2 连接态寻呼 2. 寻呼失败流程 2.1 Paging消息不可达 2.2 RRC建立失败 2.3 eNodeB未上发Initial UE message或达到超时 1. 寻呼成功流程 1.1 空闲态寻呼 寻呼成功&#xff1a;MME发起寻呼&#xff08;S1 接口发送Paing 消息&…

【漏洞复现】冰峰VPN存在敏感信息泄露漏洞

漏洞描述 冰峰VPN log/system.log模块日志信息泄露漏洞 免责声明 技术文章仅供参考&#xff0c;任何个人和组织使用网络应当遵守宪法法律&#xff0c;遵守公共秩序&#xff0c;尊重社会公德&#xff0c;不得利用网络从事危害国家安全、荣誉和利益&#xff0c;未经授权请勿利…

大数据背景下基于联邦学习的小微企业信用风险评估研究

摘要&#xff1a; 小微企业信用风险评估难是制约其融资和发展的一个主要障碍。基于大数据的小微企业信用风险评估依然面临着单机构数据片面、跨机构数据共享难、模型不稳定等诸多挑战。针对相关问题和挑战&#xff0c;本项目拟在多主体所有权数据隐私保护与安全共享的背景下&am…

RainBond 构建组件 rbd-chaos 故障解决 【真实案例】

文章目录 背景分析官方排查说明尝试进一步分析解决参考背景 在 RainBond 中把所有组件都部署了至少 2 个实例后,开始出现构建/滚动更新直接报错,且没有日志(查看日志按钮点击后,里面啥也没有)。 然后再平台管理主界面,可以看到提示 rbd-chaos 组件故障: 分析 官方排…

【HarmonyOS开发】分布式应用的开发实践(元旦快乐)

元旦快乐&#xff0c;再见2023&#xff0c;加油2024&#xff0c;未来可期&#xff0c;愿新的一年带来健康、幸福和成功&#xff01;&#x1f4aa; &#x1f4aa;&#x1f4aa; 多种设备之间能够实现硬件互助、资源共享&#xff0c;依赖的关键技术包括分布式软总线、分布式设备虚…

c++对c的加强

目录 提出了命名空间的概念 实用性增强 register关键字增强 变量检测增强 struct类型加强 C中所有的变量和函数都必须有类型 新增bool数据类型 提出了命名空间的概念 命名空间将全局作用域分成不同的部分 不同命名空间中的标识符可以同名而不会发生冲突 命名空间可以相互…

buildadmin实现多级关联下拉效果

文章目录 最终效果开始重新渲染组件编辑渲染完结 最终效果 开始 popupForm.vue代码 <FormItem :label"t(interior.interiorApply.interior_index_id)" type"remoteSelect"v-model"baTable.form.items!.interior_index_id" prop"interi…

Friedman检验及后续Nemenyi检验可视化

文章目录 Friedman 检验Nemeny检验 合作推广&#xff0c;分享一个人工智能学习网站。计划系统性学习的同学可以了解下&#xff0c;点击助力博主脱贫( •̀ ω •́ )✧ Friedman 检验 弗里德曼检验&#xff08;Friedman test&#xff09;是一种非参数统计检验方法&#xff0c;用…

VMware15安装Linux,CentOS-7x86_64

最近面试遇到很多Linux&#xff0c;咱就是实在糊弄不过去了&#xff0c;学一下吧 下载网站&#xff0c;官网&#xff1a;https://www.centos.org/download/ 第一步&#xff1a;点击x86_64 第二步&#xff1a;随便选个国内源&#xff0c;我选的清华 第三步&#xff1a;等待下…

【LeetCode每日一题】1599. 经营摩天轮的最大利润(模拟)—2024新年快乐!

2024-1-1 文章目录 [1599. 经营摩天轮的最大利润](https://leetcode.cn/problems/maximum-profit-of-operating-a-centennial-wheel/)思路&#xff1a; 1599. 经营摩天轮的最大利润 思路&#xff1a; 1.对摩天轮的运转情况进行模拟&#xff0c; 2.遍历数组&#xff0c;分别计…

SpringBoot灵活集成多数据源(定制版)

如来说世界&#xff0c;非世界&#xff0c;是名世界 如来说目录&#xff0c;非目录&#xff0c;是名目录 前言前期准备代码实现演示扩展 前言 本篇博客基于SpringBoot整合MyBatis-plus&#xff0c;如果有不懂这个的&#xff0c; 可以查看我的这篇博客&#xff1a;快速CRUD的秘诀…

云计算复习提纲

第一章 大数据的概念&#xff1a;海量数据的规模巨大到无法通过目前主流的计算机系统在合理时间内获取、存储、管理、处理并提炼以帮助使用者决策 大数据的特点&#xff1a;①数据量大&#xff0c;存储的数据量巨大&#xff0c;PB级别是常态&#xff1b;②多样&#xff0c;数…

SpringBoot自动配置原理和自定义启动器

1、自动配置的原理 项目在加载上下文时&#xff0c;会根据SpringBootApplication注解运行。该注解中有一个CompoentScan注解&#xff0c;会扫描和加载当前启动类所在的目录&#xff0c;以及所有的子目录&#xff1b;还有一个是EnableAutoConfiguration注解&#xff0c;这个注解…

nginx 多端口部署多站点

目录 1.进行nginx.conf 2.复制粘贴 3.修改端口及站点根目录 4. 网站上传 1.进行nginx.conf 在 nginx 主要配置文件 nginx.conf 中&#xff0c;server 是负责一个网站配置的&#xff0c;我们想要多个端口访问的话&#xff0c;可以复制多个 server 先进入到 nginx.conf 中 …

鸿蒙 DevEco Studio 3.1 入门指南

本文主要记录开发者入门&#xff0c;从软件安装到项目运行&#xff0c;以及后续的学习 1&#xff0c;配置开发环境 1.1 下载安装包 官网下载链接 点击立即下载找到对应版版本 下载完成&#xff0c;按照提示默认安装即可 1.2 下载SDK及工具链 运行已安装的DevEco Studio&…