Vue全局组件

devtools/2025/3/15 23:04:52/

全局组件

首先说明一下,本人是前端小学生级别的菜鸡,吐槽的话请口下留情,在评论区指出错误或者补充不足,我会很喜欢,互喷不会进步,相互指点才会。。。。谢谢大家啦

目录

  • 全局组件
    • 目录
    • 内置模板
    • 引入模板
    • 优点
    • 场景
    • 缺点

📌全局组件是通过 Vue.component 方法注册的,它实际上是一个 Vue 组件的构造函数的实例。当你全局注册一个组件后,这个组件就可以在整个应用中的任何地方使用。

通过 Vue.component 方法定义全局组件。这个方法接受两个参数:

  1. 组件的名称:在模板中使用的标签名。
  2. 组件的选项对象:包含组件的模板、数据、方法等。
  3. 全局组件通过 Vue.component() 方法注册全局组件,可以在应用的任何位置使用。例如:
javascript">// 定义一个全局组件
Vue.component('my-component', {template: '<div class="my-component">{{ message }}</div>',data() {return {message: 'Hello from MyComponent!'};}
});// 创建 Vue 实例
new Vue({el: '#app',template: `<div><h1>Hello from Parent Component!</h1><my-component></my-component></div>`
});

这些组件是全局注册的。也就是说它们在注册之后可以用在任何新创建的 Vue 根实例 (new Vue) 的模板中。比如:

javascript"><div id="app"><component-a></component-a><component-b></component-b><component-c></component-c>
</div>Vue.component('component-a', { /* ... */ })
Vue.component('component-b', { /* ... */ })
Vue.component('component-c', { /* ... */ })new Vue({ el: '#app' })

📌在所有子组件中也是如此,也就是说这三个组件在各自内部也都可以相互使用。

内置模板

📌在component中直接书写template,极度不推荐

<script src="../../vue.js"></script><body><div id="app">{{title}}<!-- 全局组件的使用 --><hello></hello><hello></hello><hello></hello><!-- 多次使用相当于多次new,所有的组件使用之间并无关联 -->这部分在后来的VueComponent中会有解释</div></body><script>new Vue({el:"#app"})// 定义全局组件// component组件定义("组件名字",{组件数据})Vue.component("hello", {// 定义当前组件的结构template: `<div><p>这是{{title}}组件</p><span>{{num}}</span><hr><button @click="add">按钮</button></div>`,// 定义当前组件的数据data() {return {title: "hello world",num: 0,};},// 定义当前组件的方法methods: {add() {this.num++;},},});</script>

📌但是以上案例并不推荐使用,因为在js的字符中书写html代码,不会自动进行语法检查,不方便书写,也不方便调试

引入模板

📌建议使用vue提供的template标签,创建模板,然后再注册到组件

<script src="../../vue.js"></script><body><div id="app"><!-- 使用全局组件 --><world></world></div></body><!-- 使用模板 --><template id="aaa"><div><h4>{{title}}</h4><input type="text" v-model="msg" /><span>{{msg}}</span></div></template><script>let app = Vue.createApp({data() {return {title: "这是全局组件",};},});// 定义全局组件方法二// component组件定义("组件名字",{组件数据})app.component("world", {template: "#aaa",// 定义当前组件的数据data() {return {title: "hello world",msg: "今天不太开心",};},});app = app.mount("#app");</script>

优点

  1. 方便复用:全局组件可以在应用程序的任何地方使用,不需要重复注册。
  2. 统一管理:所有全局组件可以集中管理,便于维护和更新。
  3. 简化模板:在需要频繁使用的组件时,全局注册可以简化模板中的组件引用。
  4. 命名约定:全局组件名称最好遵循 kebab-case(短横线连接)命名法,以避免与 HTML 元素名称冲突。

场景

  1. 通用组件:如按钮、表单输入、模态框等在多个地方使用的通用 UI 组件。
  2. 基础布局:如页面布局组件(头部、底部、侧边栏)等。
  3. 第三方组件库:通过全局注册引入和使用第三方 UI 库的组件。

缺点

  1. 命名冲突:全局组件在全局命名空间中注册,可能会导致命名冲突。
  2. 潜在的依赖性:全局组件在任何地方都可用,可能会导致组件之间的耦合度增加。
  3. 加载时间:全局组件在应用程序启动时加载,可能会增加初始加载时间,特别是当组件数量较多时。

http://www.ppmy.cn/devtools/48428.html

相关文章

C++中的适配器模式

目录 适配器模式&#xff08;Adapter Pattern&#xff09; 实际应用 图形渲染库适配器 日志系统适配器 支付系统适配器 总结 适配器模式&#xff08;Adapter Pattern&#xff09; 适配器模式是一种结构型设计模式&#xff0c;它使得原本由于接口不兼容而不能一起工作的类…

格式化数字金额,每三位加逗号

前言 格式化金额&#xff0c;例如把数字 98765432 格式化为&#xff1a;&#xffe5;987,654.32。&#xffe5;符号可以换成别的&#xff0c;也可以去掉 const formatStatistic (text, precision 2, divPrecision true, icon &#xffe5;) > {//precision是保留小数位…

Github 2024-06-12 C开源项目日报 Top10

根据Github Trendings的统计,今日(2024-06-12统计)共有10个项目上榜。根据开发语言中项目的数量,汇总情况如下: 开发语言项目数量C项目10PHP项目1PLpgSQL项目1C++项目1Ventoy: 100%开源的可启动USB解决方案 创建周期:1534 天开发语言:C协议类型:GNU General Public Licen…

html5新增的标签有哪些

HTML5新增的标签主要可以分为几类&#xff0c;以下是按照类别进行分点表示和归纳的HTML5新增标签&#xff1a; 结构性标签&#xff1a; <header>: 定义文档或节的头部。<nav>: 定义导航链接。<section>: 定义文档中的独立节。<article>: 定义文档、页…

Chrome 扩展 background 与content_script 之间通信

content_script 向 background 发消息要用&#xff1a;chrome.runtime.sendMessage chrome.runtime.sendMessage({event: "xhr", data:option }, function (res) { //option.onload(res);//console.log(res);if (res.event "xhr" && !res.err){op…

jmeter性能优化之mysql监控sql慢查询语句分析

接上次博客&#xff1a;基础配置 多用户登录并退出jmx文件&#xff1a;百度网盘 提取码&#xff1a;0000 一、练习jmeter脚本检测mysql慢查询 随意找一个脚本(多用户登录并退出)&#xff0c;并发数设置300、500后分别查看mysql监控平台 启动后查看&#xff0c;主要查看mysql…

基于Python + Flask+ Mysq实现简易留言板

使用Python Flask Mysql实现简易留言板&#xff0c;包括网友编辑留言、修改留言&#xff0c;删除留言、分页显示四大功能。 写出留言板建设过程&#xff0c;包括开发使用工具、留言板模块设计、数据库设计、页面设计、关键技术。 留言板建设过程总结 一&#xff0e;开发使用…

MySQL(5)

聚合函数 GROUP BY 的使用 需求&#xff1a;查询各个部门的平均工资&#xff0c;最高工资SELECT department_id,AVG(salary),SUM(salary)FROM employeesGROUP BY department_id;需求&#xff1a;查询各个job_id的平均工资SELECT job_id,AVG(salary)FROM employeesGROUP BY jo…