《Vue3 四》Vue 的组件化

组件化:将一个页面拆分成一个个小的功能模块,每个功能模块完成自己部分的独立的功能。任何应用都可以被抽象成一棵组件树。

Vue 中的根组件:

Vue.createApp() 中传入对象的本质上就是一个组件,称之为根组件(APP 组件)。

<div id="app"><div>{{message}}</div>
</div><script>// 组件const APP = {data() {return {message: 'Hello Vue',}},  }   // Vue.createApp() 中传入对象的本质上就是一个组件,称之为根组件(APP 组件)const app = Vue.createApp(APP)app.mount('#app')
</script>

注册组件:

每个组件都可以拥有自己的模板、样式、代码逻辑。注册组件分为两种:

  1. 全局组件:在任何其他的组件中都可以使用的组件。
  2. 局部组件:只有在注册的组件中才能使用的组件。

只要注册了全局组件,即使代码中没有用到,Webpack 等打包工具依然会对其进行打包;局部组件如果没有用到,将不会对其进行打包。

注册全局组件:

全局组件需要使用全局创建的 app 来注册,通过 app.component() 方法传入组件名称、组件对象即可注册一个全局组件。

<div id="app"><!-- 使用全局组件 --><product-item></product-item>
</div><script>const app = Vue.createApp()// 创建组件对象const productItem = {template: '<div>我是一个组件</div>'}// 注册全局组件app.component('product-item', productItem)app.mount('#app')
</script>

组件的 template 模板还有另外一种写法。

<!-- 编写组件模板 -->
<template id="product-item-template"><div>我是一个组件</div>
</template><div id="app"><product-item></product-item>
</div><script>
const app = Vue.createApp()const productItem = {// 使用组件模板template: '#product-item-template'
}
app.component('product-item', productItem)app.mount('#app')
</script>

注册局部组件:

局部组件通过 components 属性选项来进行注册,该选项对应的是一个对象,对象中的键值对是 组件名称:组件对象

<div id="app"><!-- 使用局部组件 --><product-item></product-item>
</div><script>// 创建组件对象const productItem = {template: '<div>我是一个组件</div>'}const app = Vue.createApp({// 注册局部组件components: {'product-item': productItem,}})app.mount('#app')
</script>

组件的 template 模板还有另外一种写法。

<!-- 编写组件模板 -->
<template id="product-item-template"><div>我是一个组件</div>
</template><div id="app"><product-item></product-item>
</div><script>
const app = Vue.createApp({components: {'product-item': {// 注册组件模板template: '#product-item-template',}}
})app.mount('#app')
</script>

定义组件名称的方式:

定义组件名称的方式有两种:

  1. 使用 kebab-case 短横线分隔符。
    // 使用
    <product-item></product-item>// 定义
    app.component('product-item', productItem)
    
  2. 使用 PascalCase 大驼峰标识符。
    // 使用。在原生 HTML 文件中这么写是无效的,因为 HTML 不区分大小写;不过在 Vue 文件中就没有这个问题了
    <productItem></productItem>// 定义
    app.component('productItem', productItem)
    

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

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

相关文章

ASO优化之增加应用程序评论行之有效的成功战略

应用评论不仅对于用户信任至关重要&#xff0c;而且对于提高应用可见度、转化率以及整体应用商店优化&#xff08;ASO&#xff09;也至关重要。评论和评分会影响App Store和Google Play平台上算法的排名,这些平台优先考虑具有更高参与度和满意度指标的应用程序。下面,我们将概述…

字符串存储、分割相关总结(strncpy 函数和strtok() 函数相关)

1.想用这些函数都需要导入头文件 #include<string.h> 2.怎么创建字符串并输入 #define maxsize 100 char a[maxsize1];//创建字符串&#xff0c;预留一个位置放\0 【1】scanf("%s",a);//使用 scanf 函数读取不带空格的字符串 【2】fgets(a, sizeof(a), stdi…

【Rust自学】7.4. use关键字 Pt.2 :重导入与换国内镜像源教程

喜欢的话别忘了点赞、收藏加关注哦&#xff0c;对接下来的教程有兴趣的可以关注专栏。谢谢喵&#xff01;(&#xff65;ω&#xff65;) 7.4.1. 使用pub use重新导入名称 使用use将路径导入作用域内后。该名称在词作用域内是私有的。 以上一篇文章的代码为例&#xff1a; m…

快速排序学习优化

首先&#xff0c;上图。 ‘’’ cpp int partSort(int *a ,int left,int right) {int keyi left; //做左侧基准while(left<right){while(left<right && a[right]>a[keyi]){right--;}while(left<right && a[left]<a[keyi]){left;}swap(a[left…

宏集eX710物联网工控屏在石油开采机械中的应用与优势

案例概况 客户&#xff1a;天津某石油机械公司 应用产品&#xff1a;宏集eX710物联网工控屏 应用场景&#xff1a;钻井平台设备控制系统 一、应用背景 石油开采和生产过程复杂&#xff0c;涵盖钻井平台、采油设备、压缩机、分离器、管道输送系统等多种机械设备。这些设备通…

【MySQL】第一弹----库的操作及数据类型

笔上得来终觉浅,绝知此事要躬行 &#x1f525; 个人主页&#xff1a;星云爱编程 &#x1f525; 所属专栏&#xff1a;MySQL &#x1f337;追光的人&#xff0c;终会万丈光芒 &#x1f389;欢迎大家点赞&#x1f44d;评论&#x1f4dd;收藏⭐文章 一、SQL 语句分类 DDL:数据定…

【Ubuntu】如何轻松在Apache服务器上部署Laravel博客系统

Laravel 是一个 PHP 框架&#xff0c;和 Angular 以及 Symfony 类似&#xff0c;它能让你快速且高效地搭建出功能强大的网站。在这篇文章里&#xff0c;我将手把手教你如何在 Ubuntu 系统上使用 Apache 和 MySQL 部署 Laravel 应用。 步骤 1&#xff1a;更新系统 首先&#x…

阿里云-将旧服务器数据与配置完全迁移至新服务器

文章目录 一&#xff1a;创建镜像二&#xff1a;将创建好的镜像复制到新服务器所在的目标地域&#xff08;如果新服务器与镜像在同一地域就不用进行这一操作&#xff09;三&#xff1a;将镜像配置到新服务器上四&#xff1a;导出安全组&#xff08;如果新服务器与旧服务器使用同…

MYSQL无法被连接问题

如果您在尝试连接到MySQL服务器时遇到问题&#xff0c;以下描述了您可以采取的一些措施来纠正该问题。 确保服务器正在运行。如果没有&#xff0c;则客户端无法连接到它。例如&#xff0c;如果尝试连接到服务器失败并出现以下消息之一&#xff0c;则可能是服务器未运行&#xf…

vue3使用element-plus,解决 el-table 多选框,选中后翻页再回来选中失效问题

问题&#xff1a;勾选的数据分页再回来回消失 1.在el-table中加 :row-key"getRowKey" const getRowKey (row) > { return row.id; // id必须是唯一的 }; 2.给type为selection的el-table-column添加上reserve-selection属性 <el-tableref"multipleTab…

防火墙原理介绍大全

硬件防火墙的原理 软件防火墙只有包过滤的功能&#xff0c;硬件防火墙中可能还有除软件防火墙以外的其他功能&#xff0c;例如CF&#xff08;内容过滤&#xff09;IDS&#xff08;入侵侦测&#xff09;IPS&#xff08;入侵防护&#xff09;以及VPN等等的功能。 也就是说硬件防…

StableAnimator模型的部署:复旦微软提出可实现高质量和高保真的ID一致性人类视频生成

文章目录 一、项目介绍二、项目部署模型的权重下载提取目标图像的关节点图像&#xff08;这个可以先不看先用官方提供的数据集进行生成&#xff09;提取人脸&#xff08;这个也可以先不看&#xff09;进行图片的生成 三、模型部署报错 一、项目介绍 由复旦、微软、虎牙、CMU的…

JS中的闭包和上下文

变量提升 和 函数提升 这里要提到一个提升的概念&#xff0c;即在JS中&#xff0c;在解析代码之前还有一个预处理的过程&#xff0c;这个过程中会把部分变量和函数声明提前到代码的最顶部&#xff0c; 会在其他所有代码之前执行。虽然当我们按照规范&#xff08;严格模式或者T…

从百度云网盘下载数据到矩池云网盘或者服务器内

本教程教大家如何快速将百度云网盘数据集或者模型代码文件下载到矩池云网盘或者服务器硬盘上。 本教程使用到了一个开源工具 BaiduPCS-Go&#xff0c;官方地址 &#xff1a; https://github.com/qjfoidnh/BaiduPCS-Go 这个工具可以实现“仿 Linux shell 文件处理命令的百度网…

基于Fastapi搭建API服务实践案例

文章目录 前言服务框架结构app.pyrun_app_server.shrouters/upload.pyrouters/query_result.pyutils/utils.pyutils/tasks.py 总结 前言 本文讲述了如何使用fastapi搭建一个属于自己的服务&#xff0c;整个服务使用fastapi框架搭建&#xff0c;celery管理任务队列&#xff0c;…

【每日学点鸿蒙知识】hvigor升级、Dialog动画、LocalStorage无效、页面与子组件的生命周期、cookie设置

1、HarmonyOS 编译工具hvigor如何升级到"hvigorVersion": "4.2.0"版本&#xff1f; 可以手动更新到指定版本&#xff0c;参考链接如下&#xff1a;https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/ide-hvigor-plugin-V5 2、HarmonyOS…

【AI学习】DeepSeek-V3 技术报告学习:总体架构

翻了一下DeepSeek-V3 技术报告学习&#xff0c;太长&#xff0c;只是大概翻了一下&#xff0c;其中Multi-Token Prediction的技术就很亮眼。 摘要 本文介绍了DeepSeek-V3&#xff0c;这是一个拥有671B总参数的强大混合专家&#xff08;MoE&#xff09;语言模型&#xff0c;每…

总结-常见缓存替换算法

缓存替换算法 1. 总结 1. 总结 常见的缓存替换算法除了FIFO、LRU和LFU还有下面几种&#xff1a; 算法优点缺点适用场景FIFO简单实现可能移除重要数据嵌入式系统&#xff0c;简单场景LRU局部性原理良好维护成本高&#xff0c;占用更多存储空间内存管理&#xff0c;浏览器缓存L…

手机联系人 查询 添加操作

Android——添加联系人_android 添加联系人-CSDN博客 上面连接添加联系人已测试 是可以 Android : 获取、添加、手机联系人-ContentResolver简单应用_contentresolver 添加联系人-CSDN博客

【黑马头条训练营】day01-黑马头条整体构成与App登录

目录 描述app端从登录请求到首页显示的全部流程 描述用户微服务的组成及登录业务及实现逻辑 自己编写用户微服务登录关键逻辑 描述app端从登录请求到首页显示的全部流程 从浏览器发起请求访问app前端 通过nginx请求到我们app前端 在app端我们输入手机号及密码登录 发起请求…