使用vue.component全局注册组件、props的使用

news2024/9/20 22:29:22

通过components注册的是私有子组件

例如:
在组件A的 components 节点下,注册了组件F。

则组件F只能用在组件A中;不能被用在组件C中。

注册全局组件

 在vue项目的 main.js 入口文件中,通过 Vue.component() 方法,可以注册全局组件。示例代码如下:

// 导入需要全局注册的组件
import Count from '@/components/Count.vue'
//参数1:字符串格式,表示组件的"注册名称"
//参数2:需要被全局注册的那个组件
Vue.component('MyCount' , Count);

 注意:在自己的组件里不能使用自己;

插件:

Vue组件代码自动生成安装:Vue VSCode Snippets和Vetur插件。

 

 组件的props

 props是组件的自定义属性,在封装通用组件的时候,合理地使用 props 可以极大的提高组件的复用性!
它的语法格式如下:

export default {
    // 组件的自定义属性
    props: ['自定义属性A', '自定义属性B', '其它自定义网性...'],

    // 组件的私有数据
    data() {
        return { }
    }
}

应用案例: 

props 是只读的

 vue规定:组件中封装的自定义属性是只读的,程序员不能直接修改props的值。否则会直接报错:

 

 要想修改props的值,可以把props的值转存到data中,因为data中的数据都是可读可写的!

props: ['init'],
data() {
    return {
        count: this.init // 把this.init的值转存到count 
    }
}

Props----default默认值

 对象的格式:

 props的type值类型

 在声明自定义属性时,可以通过 type 来定义属性的值类型。示例代码如下:

export default {
    props: {
        init: {
            //用 default 属性定义属性的默认值
            default: 0,
            //用type 属性定义属性的值类型,
            //如果传递过来的值不符合此类型,则会在终端报错
            type: Number
        }
    }
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/458534.html

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

相关文章

数据结构和算法学习记录——平衡二叉树(基本介绍、平衡因子、平衡二叉树的定义、平衡二叉树的高度)

目录 基本介绍 平衡因子 平衡二叉树 平衡二叉树的高度 基本介绍 什么是平衡二叉树? 以一个例子来解释一下: 搜索树结点按不同的插入次序,将会导致不同的深度和平均查找长度ASL 在二叉搜索树中查找一个元素: &#xff08…

TCP 协议的低效实现

包括 Linux kernel 在内的各种 TCP 实现均使用类似 skb 的对象管理一个个 packet,使 TCP 失去了 “流” 特征。应用通过 syscall 每写入一批数据,协议栈都可能生成一个 skb: ​ 仅管理这些 skb 就是一笔大开销。除了 skb 数据结构本身的 cru…

Python小姿势 - import requests

import requests Python中使用requests模块发送POST请求 在使用Python进行开发时,经常会遇到需要向某个网址发送POST请求的情况。这时候就需要使用到requests模块了。 requests模块是Python的一个标准模块,可以直接使用pip安装。 安装完成后,…

Java每日一练(20230425)

目录 1. 乘积最大子数组 🌟🌟 2. 插入区间 🌟🌟 3. 删除有序数组中的重复项 II 🌟🌟 🌟 每日一练刷题专栏 🌟 Golang每日一练 专栏 Python每日一练 专栏 C/C每日一练 专栏…

CesiumForUnreal之3DTileset点选拾取属性与单体高亮

文章目录 1.实现目标2.实现过程2.1 3DTiles数据准备2.2 属性拾取2.3 单体高亮3.参考资料1.实现目标 在UE5中使用CesiumForUnreal插件加载本地的3dTiles建筑白模数据,实现点击拾取3DTileset单体要素的属性数据,并对高亮单体进行展示,GIF动图如下: 2.实现过程 总体的实现过程…

模型剪枝网络 Learning Efficient Network throung Network Slimming 简述

1. 概述 训练得到的特征图,并不是所有特征图都重要,另一方面,希望对权重执行策略,体现出权重之间的差异性,最终目的就是获得不同特征图中的channel sacling factors,表征了不同特征图的重要性 2. BN 采…

老码农眼中的大模型(LLM)

即便全力奔跑,也不一定能跟上时代的步伐。但如果失去了学习的动力,很可能会被时代淘汰。而且,当时代淘汰我们的时候,往往不会有任何预警。基于大模型的 ChatGPT 给我们带来了极大的震撼,那么什么是大模型呢&#xff1f…

【网络进阶】五种IO网络模型(一)

文章目录 1. 阻塞IO2. 非阻塞IO 1. 阻塞IO 在Linux中,默认情况下,所有的套接字(socket)都是阻塞的。典型的读取操作流程如下: 当用户进程调用read系统调用时,内核开始执行I/O的第一个阶段,即…

智慧医院智能化系统设计与能耗管理产品选型

摘要:结合某知名大型三甲综合医院项目的智能化系统设计,提出智慧医院智能化系统的技术解决方案,阐述智慧医院智能化系统方案的总体架构、建设目标、设计宗旨、典型应用及各智能化子系统的设计方案。 关键词:智慧医院;智…

mybatis3源码篇(2)——执行流程

mybatis 版本:v3.3.0 文章目录 执行流程MapperProxyFactoryMapperProxyMapperMethodexecuteconvertArgsToSqlCommandParamResultHandler SqlSessionExecutor(执行器)StatementHandler(声明处理器)ParameterHandler&…

【设计模式】我对设计模式的C语言解读(下)

书接上回 由于内容太多,编辑器太卡了,所以分P了 上P在这里 目录 书接上回备忘录模式观察者模式 备忘录模式 备忘录模式的介绍: https://refactoringguru.cn/design-patterns/memento 备忘录模式的C实现: https://refactoringguru.cn/design-patterns/m…

【数据挖掘与商务智能决策】第十三章 数据降维之PCA 主成分分析

13.1.2 PCA主成分分析代码实现 1.二维空间降维Python代码实现 import numpy as np X np.array([[1, 1], [2, 2], [3, 3]]) Xarray([[1, 1],[2, 2],[3, 3]])# 也可以通过pandas库来构造数据,效果一样 import pandas as pd X pd.DataFrame([[1, 1], [2, 2], [3, 3…

二分查找【数组】

⭐前言⭐ ※※※大家好!我是同学〖森〗,一名计算机爱好者,今天让我们进入复习模式。若有错误,请多多指教。更多有趣的代码请移步Gitee 👍 点赞 ⭐ 收藏 📝留言 都是我创作的最大的动力! 题目 70…

接口测试用例设计思路

(我的公众号“墨石测试攻略”,关注获取软件测试相关知识及整套接口测试实战项目!) 接口测试用例的设计,从功能测试角度来说:首先需要分析接口文档。 现在很多公司都使用swagger来管理接口。swagger中可以…

fMRI时间序列振幅和相位对功能连接分析的影响

导读 目的:fMRI领域的一些研究使用瞬时相位(IP)表征(源自BOLD时间序列的解析表征)考察了脑区之间的同步性。本研究假设来自不同脑区的瞬时振幅(IA)表征可以为脑功能网络提供额外的信息。为此,本研究探索了静息态BOLD fMRI信号的这种表征,用于…

SpringBoot AnnotationFormatterFactory接口+自定义注解实现类型转换

参考资料 自定义AnnotationFormatterFactory实现注解方式类型转换Spring MVC 基于AnnotationFormatterFactory接口实现自定义的规则 目录 一. 前期准备1.1. 自定义转换标记注解1.2 入参form 二. 实现AnnotationFormatterFactory接口,构建格式化Factory2.1 code补全…

【7】一篇文章学习 Linux 中一些硬核的常用知识

目录 一、systemctl二、软链接三、日期(date 命令)四、Linux 的时区(1) 修改时区(2) ntp 五、IP 地址六、主机名七、域名解析八、配置 Linux 的固定 IP 地址(1) 在 VMwareWorkstation 中配置 IP 地址网关和网段(IP 地址的范围)(2)…

[陇剑杯 2021]之Misc篇(NSSCTF)刷题记录④

NSSCTF-Misc篇-[陇剑杯 2021] jwt:[陇剑杯 2021]jwt(问1)[陇剑杯 2021]jwt(问2)[陇剑杯 2021]jwt(问3)[陇剑杯 2021]jwt(问4)[陇剑杯 2021]jwt(问5&#xff0…

洗地性价比高的是哪款?性价比高的洗地机推荐

在如今人工智能随处可见的时代,洗地机已经成为了我们家庭清洁的得力助手,它用高效便捷的清洁方式,对于地面的灰尘或者地板之间的缝隙里的细小垃圾,能够快速清理,省时省力。然而,对于很多消费者来说&#xf…

一文带你学会如何写一份糟糕透顶的简历

我们每个人几乎都会面对找工作这件事,而找工作或者说求职首先就是要写一份简历。今天狗哥将以一个不同的视角带你写一份无与伦比,糟糕透顶的求职简历,说实话,其实几年前,我就是这么写的。 目录 1. 文件名 2. 基本信…