Vue.js 自定义组件的三种用法

1.创建项目

创建项目,你可以参考我以前的博文,这里省略了

项目的目录结构如下:

接着,我们在 src/components 目录下创建一个自定义的组件 SplashHello.vue,示例代码如下所示:

<template><div><p>{{ title }}</p><p>{{ message }}</p></div>
</template>
<script>
export default {name: "splash-hello",props:['title'],data: function () {return {message: "组件启动中...",};},
};
</script>

2.注册成局部组件

我们知道,通过 Vue-CLI 创建的项目,vue 会自动为我们创建一个 App.vue 的根组件,用于承载整个应用程序,如果我们在 App 的 components 注册我们的自定义组件,那么它也算一个局部组件,只能应用在 App 这样的一个组件内。注册方式如下所示:

<!--1.导入局部组件  2.注册局部组件-->
<template><div id="app"><img alt="Vue logo" src="./assets/logo.png" /><!-- 3.应用自定义组件 --><SplashHello title="hello world"></SplashHello></div>
</template><script>
// 1.导入局部组件
import SplashHello from "./components/SplashHello.vue";export default {name: "App",components: {// 2.注册局部组件SplashHello,},
};
</script>
<style>
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoo

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

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

相关文章

C++初学者指南第一步---13.聚合类型

C初学者指南第一步—13.聚合类型 文章目录 C初学者指南第一步---13.聚合类型1. 类型分类&#xff08;简化&#xff09;2. 如何定义和使用3. 为什么选择自定义类型/数据聚合&#xff1f;4. 聚合类型初始化5.混合6. 复制7. 值和引用的语义8.聚合的向量(std::vector)9.最令人烦恼的…

不使用ES,如何使用MySQL实现模糊匹配

1.业务场景 例如&#xff1a;我们实现一个公司的申请审批流程&#xff0c;整个业务流程涉及到两种角色&#xff0c;分别是商务角色与管理员角色&#xff0c;整个流程如下图所示&#xff1a; 核心流程总结为一句话&#xff1a;商务角色申请添加公司后由管理员进行审批。 商务在…

10.2 JavaEE——Spring MVC入门程序

要求在浏览器发起请求&#xff0c;由Spring MVC接收请求并响应&#xff0c;具体实现步骤如下。 一、创建项目 在IDEA中&#xff0c;创建一个名称为chapter10的Maven Web项目。 &#xff08;一&#xff09;手动设置webapp文件夹 1、单击IDEA工具栏中的File→“Project Structu…

干货 | 2024生成式AI产业落地路径研究报告(免费下载)

【1】关注本公众号&#xff0c;转发当前文章到微信朋友圈 【2】私信发送 2024生成式AI产业落地路径研究报告 【3】获取本方案PDF下载链接&#xff0c;直接下载即可。 如需下载本方案PPT/WORD原格式&#xff0c;诚挚邀请您微信扫描以下二维码加入方案驿站知识星球&#xff0c;…

已解决ApplicationException异常的正确解决方法,亲测有效!!!

已解决ApplicationException异常的正确解决方法&#xff0c;亲测有效&#xff01;&#xff01;&#xff01; 目录 问题分析 出现问题的场景 报错原因 解决思路 解决方法 分析错误日志 检查业务逻辑 验证输入数据 确认服务器端资源的可用性 增加对特殊业务情况的处理…

程序猿大战Python——面向对象——继承进阶

方法重写 目标&#xff1a;掌握方法的重写。 当父类的同名方法达不到子类的要求&#xff0c;则可以在子类中对方法进行重写。语法&#xff1a; class 父类名(object):def 方法A(self):代码... class 子类名(父类名):def 方法A(self):代码... 例如&#xff0c;一起来完成&…

UEC++ 虚幻5第三人称射击游戏(一)

UEC 虚幻5第三人称射击游戏&#xff08;一&#xff09; 创建一个空白的C工程 人物角色基本移动 创建一个Character类添加一些虚幻商城中的基础动画 给角色类添加Camera与SPringArm组件 UPROPERTY(VisibleAnywhere, BlueprintReadOnly, Category "SpringArm")clas…

AG32 MCU Start Kit 开发板快速入门及 21天体验活动

AG32 IDE开发环境搭建-完整版 海振远科技 2024-6-18 AG32 MCU开发板的使用 使用准备 在使用开发板前&#xff0c;请确认已经安装好开发环境。 安装环境过程&#xff0c;请参考文档《AG32 开发环境搭建.pdf》 上电&#xff1a; 给开发板5V 供电&#xff0c;打开开关&#…

极速下载,尽在Gopeed — 现代全能下载管理器

Gopeed&#xff1a;用Gopeed&#xff0c;让下载变得简单而高效。- 精选真开源&#xff0c;释放新价值。 概览 Gopeed是一个用Go语言编写的现代下载管理器&#xff0c;支持跨平台使用&#xff0c;包括Windows、macOS、Linux等。它不仅提供了基本的下载功能&#xff0c;还通过内…

免费的AI在线写作工具,让写作变的更简单

在如今的时代&#xff0c;写作已经成为了我们日常生活中不可或缺的一部分。无论是自媒体创作者、学生还是办公职场人员&#xff0c;都有内容创作的需求。然而&#xff0c;写作过程往往伴随着灵感枯竭、查找资料费时等问题。下面小编就来和大家分享几款免费的AI在线写作工具&…

流水账里的贷款密码:如何打造银行眼中的“好流水”

说到贷款&#xff0c;很多人可能都遇到过这样的困惑&#xff1a;明明觉得自己条件不错&#xff0c;为啥银行就是不给批呢&#xff1f;其实&#xff0c;银行在审批贷款时&#xff0c;除了看你的征信记录、收入证明这些基础材料外&#xff0c;还有一个很重要的参考指标&#xff0…

文心一言 VS 讯飞星火 VS chatgpt (287)-- 算法导论21.2 6题

六、假设对 UNION 过程做一个简单的改动&#xff0c;在采用链表表示中拿掉让集合对象的 tail 指针总指向每个表的最后一个对象的要求。无论是使用还是不使用加权合并启发式策略&#xff0c;这个修改不应该改变 UNION 过程的渐近运行时间。(提示:而不是把一个表链接到另一个表后…

常见数字化转型方案撰写的思维模式

通过这一段时间的学习和倾听,结合DAMA数据管理知识体系学习与项目实践,对大部分数据治理类项目、信息化建设和数字化转型项目的思维模式做了一些总结梳理,具体有如下四种,供参考。 一、方法1:结合环境六边形法 1.要点题,弄清楚问题是什么 2.目标原则有哪些,补充哪些 3.…

如何使用代理ip上网移动转电信

在一些特定的工作场景中&#xff0c;比如跨网办公、数据分析等&#xff0c;我们常常需要将网络IP从一种类型转换到另一种类型。如需将移动网络转电信IP代理。那么&#xff0c;如何使用代理IP上网移动转电信呢&#xff1f;接下来&#xff0c;将为您揭示一个便捷的方法&#xff0…

【Linux】系统文件IO·文件描述符fd

前言 C语言文件接口 C 语言读写文件 1.C语言写入文件 2.C语言读取文件 stdin/stdout/stderr 系统文件IO 文件描述符fd&#xff1a; 文件描述符分配规则&#xff1a; 文件描述符fd&#xff1a; 前言 我们早在C语言中学习关于如何用代码来管理文件&#xff0c;比如文件的…

《Fundamentals of Power Electronics》——绕组导体中的涡流

绕组导体中的涡流也会导致功率损耗。这可能导致铜耗大大超过上述公式预测的值。特殊的导体涡流机制被称为集肤效应和紧邻效应。这些机制在多层绕组的大电流导体中最为明显&#xff0c;特别是在高频变换器中。 下图说明了一个简单变压器绕组中的邻近效应。

微软TTS最新模型,发布9种更真实的AI语音

很高兴与大家分享 Azure AI 语音翻译产品套件的两个重大更新&#xff1a; 视频翻译和增强的实时语音翻译 API。 视频翻译&#xff08;批量&#xff09; 今天&#xff0c;我们宣布推出视频翻译预览版&#xff0c;这是一项突破性的服务&#xff0c;旨在改变企业本地化视频内容…

更改ip后还被封是ip质量的原因吗?

不同的代理IP的质量相同&#xff0c;一般来说可以根据以下几个因素来进行判断&#xff1a; 1.可用率 可用率就是提取的这些代理IP中可以正常使用的比率。假如我们无法使用某个代理IP请求目标网站或者请求超时&#xff0c;那么就代表这个代理不可用&#xff0c;一般来说免费代…

mysql学习——SQL中的DQL和DCL

SQL中的DQL和DCL DQL基本查询条件查询聚合函数分组查询排序查询分页查询 DCL管理用户权限控制 学习黑马MySQL课程&#xff0c;记录笔记&#xff0c;用于复习。 DQL DQL英文全称是Data Query Language(数据查询语言)&#xff0c;数据查询语言&#xff0c;用来查询数据库中表的记…

Flowable更改默认数据库H2到Mysql数据库

Flowable更改默认数据库H2到Mysql数据库 1、下载flowable安装包&#xff0c;从官方下载&#xff0c;下载后解压缩 2、将flowable-ui.war包拷贝到tomcat里面的webapps目录&#xff0c;tomcat的安装在此就不熬术了。 3、此时启动tomcat&#xff0c;flowable-ui会使用默认的H2…