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

通过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.mfbz.cn/a/14221.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

springboot+vue小区物业管理系统(源码+文档)

风定落花生,歌声逐流水,大家好我是风歌,混迹在java圈的辛苦码农。今天要和大家聊的是一款基于springboot的小区物业管理系统。项目源码以及部署相关请联系风歌,文末附上联系信息 。 💕💕作者:风…

【2023软考】信息系统监理师与系统集成项目管理工程师哪个更好考?

肯定是系统集成项目管理工程师更好考。 软考信息系统监理师是一项国家级专业职业资格证书,是我国信息技术行业的重要职业资格之一。软考信息系统监理师主要从事信息系统建设项目的监理和管理工作,包括项目前期准备、项目实施阶段和项目验收阶段的监理和…

字符串总结

一、最长公共前缀 1.方法一&#xff1a;横向扫描 class Solution { public:string longestCommonPrefix(vector<string>& strs) {if (!strs.size()) {return "";}string prefix strs[0];int count strs.size();for (int i 1; i < count; i) {prefix…

VS同时调试主程序和子程序工具

VS要想要实现同时调试主程序和子程序&#xff0c;可使用工具 Microsoft Child Process Debugging power Tool 来实现。 我的环境和官方使用说明 环境&#xff1a;VS2019 官方使用说明&#xff1a;Introducing the Child Process Debugging Power Tool - Azure DevOps Blogh…

Shell编程规范与使用

目录 一、Shell脚本概述 1&#xff09;Shell的作用——命令解释器&#xff0c;“翻译官” 2&#xff09;常见shell解释器 3&#xff09;编程语言类型 4&#xff09;Shell脚本 编写脚本代码 Shell脚本的构成 赋予可执行权限 Shell脚本的执行方法 5&#xff09;重定向与…

【学习笔记】unity脚本学习(六)【GUI发展历程、IMGUI控件、Layout自动布局】

目录 unity 界面发展IMGUINGUI其他GUI插件uGUIUI 工具包比较 GUI基础GUI静态变量Unity扩展编辑器屏幕空间的总尺寸Screen.width 和 Screen.height GUI静态函数&#xff08;GUI控件&#xff09;Label图片 Box控件Button与RepeatButtonTextFieldTextAreaPasswordField其他控件 GU…

缓存优化---环境搭建

缓存优化 为什么要使用redis缓存&#xff1f; 问题说明 用户数量多&#xff0c;系统访问大&#xff0c;频繁访问数据库&#xff0c;系统性能下降&#xff0c;用户体验差 环境搭建 maven坐标 在项目中的pom.xml文件中导入spring data redis的maven坐标&#xff1a; <depen…

Java+GeoTools实现WKT数据根据EPSG编码进行坐标系转换

场景 JavaGeoTools(开源的Java GIS工具包)快速入门-实现读取shp文件并显示&#xff1a; JavaGeoTools(开源的Java GIS工具包)快速入门-实现读取shp文件并显示_霸道流氓气质的博客-CSDN博客 在上面实现Java中集成Geotools之后&#xff0c;需求是将WKT数据转换成其他坐标系的W…

web前端实验5

实 验 报 告 课 程 Web前端应用开发 实验项目 Jquery AJAX编程 成 绩 专业班级 班内序号 指导教师 姓 名 学 号 实验日期 实验目的及要求&#xff1a; &#xff08;1&#xff09; 理解和掌握Jquery AJAX的get方式请求 &#xff08;2&#xff09; 理解和掌握Jquery AJAX的pos…

Redis可视化工具-Another Redis Desktop Manager 安装与连接哨兵集群

目录 一、下载安装 1.1 下载 1.2 安装 二、使用 2.1 新建连接 2.2 新增数据 2.3 应用设置 2.3.1深色模式、语言 2.3.2多个连接的颜色标记 一、下载安装 Another Redis DeskTop Manager 是 Redis 可视化管理工具&#xff0c;体积小&#xff0c;完全免费。最重要的是稳定…

低代码平台名声臭,用起来却真香——60%开发者不敢承认

群体盲从意识会淹没个体的理性&#xff0c;个体一旦将自己归入该群体&#xff0c;其原本独立的理性就会被群体的无知疯狂所淹没。——《乌合之众》 不知道从什么时候开始&#xff0c;“低代码不行”的论调充斥着整个互联网圈子&#xff0c;csdn、掘金、知乎、B站、脉脉……到处…

面试华为,花了2个月才上岸,真的难呀····

花2个月时间面试一家公司&#xff0c;你们觉得值吗&#xff1f; 背景介绍 美本计算机专业&#xff0c;代码能力一般&#xff0c;之前有过两段实习以及一个学校项目经历。第一份实习是大二暑期在深圳的一家互联网公司做前端开发&#xff0c;第二份实习由于大三暑假回国的时间比…

32岁阿里P7,把简历改成不知名小公司,学历改成普通本科,工作内容不变,投简历全挂!...

hr靠什么来招人&#xff1f; 一位猎头讲述了自己和朋友打赌的故事&#xff1a; 朋友在阿里云&#xff0c;32岁&#xff0c;P7&#xff0c;他把简历上的公司改成不知名&#xff0c;学历改成普通本科&#xff0c;工作内容不变&#xff0c;结果投其他公司&#xff08;比如京东&…

Spring Boot异步任务、异步消息

目录 1.异步任务 1.1.概述 1.2.使用 2.异步消息 2.1.概述 2.2.使用 1.异步任务 1.1.概述 举一个例子&#xff0c;我现在有一个网上商城&#xff0c;客户在界面点击下单后&#xff0c;后台需要完成两步&#xff1a; 1.创建客户订单 2.发短信通知客户订单号 这里面第2…

【hello Linux】理解文件系统

目录 创建文件的过程&#xff1a; 删除文件的过程&#xff1a; 创建目录的过程&#xff1a; 查看inode编号&#xff1a; 硬链接 软链接 Linux&#x1f337; 我们知道文件所有数据 文件内容 文件属性信息&#xff1b; 未打开的文件是被存放到磁盘/固态硬盘中的&#xff1b; …

《前端bug齁逼多,真假开发说》2023/4/10-2023/4/18问题汇总

1 高德地图 运行抱错 INVALID_USER_SCODE 这里是错误信息对应原因 错误信息列表-参考手册-地图 JS API | 高德地图API 这里是高德地图api设置说明 准备-入门-教程-地图 JS API | 高德地图API 如果你自己能排查出错误 那不用看我的&#xff0c;如果都写的对还是抱错…

1686_MATLAB处理Excel文件

全部学习汇总&#xff1a; GreyZhang/g_matlab: MATLAB once used to be my daily tool. After many years when I go back and read my old learning notes I felt maybe I still need it in the future. So, start this repo to keep some of my old learning notes servral …

非常详细的阻抗测试基础知识

编者注&#xff1a;为什么要测量阻抗呢&#xff1f;阻抗能代表什么&#xff1f;阻抗测量的注意事项... ...很多人可能会带着一系列的问题来阅读本文。不管是数字电路工程师还是射频工程师&#xff0c;都在关注各类器件的阻抗&#xff0c;本文非常值得一读。全文13000多字&#…

基于html+css的图片展示17

准备项目 项目开发工具 Visual Studio Code 1.44.2 版本: 1.44.2 提交: ff915844119ce9485abfe8aa9076ec76b5300ddd 日期: 2020-04-16T16:36:23.138Z Electron: 7.1.11 Chrome: 78.0.3904.130 Node.js: 12.8.1 V8: 7.8.279.23-electron.0 OS: Windows_NT x64 10.0.19044 项目…

2023年4月-近期看书

复习书记 用于读书 文章目录 复习书记一、(2001)控制工程基础二、(3001)交通管理与控制三、(1001)英语 一、(2001)控制工程基础 学习这本书的前6章节。 参看视频链接&#xff1a; https://www.bilibili.com/video/BV1Sb411q7jU?p8&spm_id_frompageDriver&vd_source…
最新文章