Vue.js组件开发

在 Vue.js 中进行组件开发可以极大地提高代码的可维护性和复用性。以下是关于 Vue.js 组件开发的详细介绍:

一、组件的基本概念

组件是 Vue.js 中可复用的最小单位,它将页面的一部分功能封装起来,使得代码更加模块化。一个组件可以包含 HTML 模板、JavaScript 逻辑和 CSS 样式。

二、创建组件的方式

  1. 全局组件

    • 使用 Vue.component() 方法创建全局组件。例如:
    Vue.component('my-component', {template: '<div>这是一个全局组件</div>',
    });
    
    • 全局组件在任何地方都可以直接使用,无需在父组件中进行局部注册。
  2. 局部组件

    • 在父组件中通过 components 选项注册局部组件。例如:
    const ParentComponent = {components: {'my-component': {template: '<div>这是一个局部组件</div>',},},
    };
    
    • 局部组件只能在注册它的父组件中使用。

三、组件的属性(Props)

  1. 定义属性

    • 在组件选项中使用 props 选项来定义接收的属性。例如:
    const ChildComponent = {props: ['message'],template: '<div>{{ message }}</div>',
    };
    
    • 可以指定属性的类型、默认值等。
  2. 传递属性

    • 在使用组件时,通过属性绑定的方式将数据传递给组件。例如:
    <child-component :message="parentMessage"></child-component>
    

四、组件的事件(Events)

  1. 触发事件

    • 在组件内部,可以使用 $emit() 方法触发自定义事件。例如:
    const ChildComponent = {methods: {buttonClick() {this.$emit('custom-event', 'some data');},},template: '<button @click="buttonClick">触发事件</button>',
    };
    
  2. 监听事件

    • 在父组件中使用 v-on 指令监听子组件触发的事件。例如:
    <child-component @custom-event="handleEvent"></child-component>
    

五、组件的插槽(Slots)

  1. 匿名插槽

    • 可以在父组件中使用 <slot> 标签向子组件传递内容,子组件中使用 <slot> 来显示父组件传递的内容。例如:
    <!-- 父组件 -->
    <child-component><p>这是插槽内容</p>
    </child-component><!-- 子组件 -->
    <template><div><slot></slot></div>
    </template>
    
  2. 具名插槽

    • 父组件中可以使用带有 name 属性的 <slot> 标签向子组件传递内容,子组件中使用带有相同 name<slot> 来显示相应的内容。例如:
    <!-- 父组件 -->
    <child-component><template v-slot:header><h1>这是头部插槽内容</h1></template><template v-slot:content><p>这是主体插槽内容</p></template>
    </child-component><!-- 子组件 -->
    <template><div><slot name="header"></slot><slot name="content"></slot></div>
    </template>
    

六、组件的生命周期钩子

Vue.js 组件有一系列的生命周期钩子函数,允许在不同阶段执行特定的逻辑。

  1. 常见的生命周期钩子:

    • created:组件实例被创建完成后调用。
    • mounted:组件被挂载到 DOM 后调用。
    • updated:组件数据更新后调用。
    • destroyed:组件被销毁前调用。
  2. 使用示例:

    const MyComponent = {data() {return {message: 'Hello',};},created() {console.log('组件实例创建完成');},mounted() {console.log('组件挂载到 DOM');},updated() {console.log('组件数据更新');},destroyed() {console.log('组件被销毁');},
    };
    

七、组件的样式作用域

  1. 为了避免组件之间的样式冲突,可以使用 scoped 属性来为组件的样式添加作用域。例如:

    <style scoped>.my-component {color: blue;}
    </style>
    
    • 这样定义的样式只会应用于当前组件的元素。
  2. 如果需要在多个组件之间共享样式,可以使用全局样式或者使用 CSS 预处理器的模块化功能。

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

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

相关文章

奖金高达 110 万元,Spatial Joy 2024 全球 AR 应用开发大赛启动

今年是AR应用开发大赛第三届&#xff0c;恰逢Rokid成立十周年&#xff0c;我们推出全新的大赛品牌“Spatial Joy”&#xff0c;引领开发者享受开发乐趣&#xff0c;为其打造充满挑战和惊喜的开发之旅&#xff0c;逐渐成为空间计算时代全球最大AR应用开发大赛。回顾大赛发展&…

PCB敷铜敷不了相同网络的线怎么办?

图片上的情况就是今天需要讲的内容&#xff0c;可以看出出来的线头是GND,敷的铜也是GND但是相同网络就是不能连在一起。 解释&#xff1a; 这是因为我们敷铜的时候属性选的是连接相同的net,如图所示&#xff1a; 解决办法&#xff1a; 只需要设置改为相同的Object就可以了&…

STM32+ADC+扫描模式

1 ADC简介 1 ADC(模拟到数字量的桥梁) 2 DAC(数字量到模拟的桥梁)&#xff0c;例如&#xff1a;PWM&#xff08;只有完全导通和断开的状态&#xff0c;无功率损耗的状态&#xff09; DAC主要用于波形生成&#xff08;信号发生器和音频解码器&#xff09; 3 模拟看门狗自动监…

高效的视频压缩标准H.264介绍,以及H.264在视频监控系统中的应用

目录 一、概述 二、 工作原理 三、技术特点与优势 1、高效压缩率 2、高质量视频 3、错误恢复能力 4、灵活性 四、编解码过程 1、编码过程 2、解码过程 五、帧类型与结构 1、I帧 2、P帧 3、B帧 六、应用与优势 1、节省存储空间和带宽 2、提高视频质量 3、适应…

2024大二上js高级+ES6学习9.29(深/浅拷贝,正则表达式,let/const,解构赋值,箭头函数,剩余参数)

9.29.2024 1.浅拷贝和深拷贝 Es6的语法糖&#xff1a;用assign将obj对象浅拷贝给o对象。 把数组写在前面是因为数组也是对象 2.正则表达式 创建和检测正则表达式 正则表达式的使用直接跳过&#xff0c;等要用时现查现用 3.ES6 4.let关键字 块级作用域是指在一个{}l里 变量提…

File 和 Blob两个对象有什么不同

Blob 在 JavaScript 中&#xff0c;Blob&#xff08;Binary Large Object&#xff09;对象用于表示不可变的、原始的二进制数据。它可以用来存储文件、图片、音频、视频、甚至是纯文本等各种类型的数据。Blob 提供了一种高效的方式来操作数据文件&#xff0c;而不需要将数据全…

招联金融内推-2025校招

【投递方式】 直接扫下方二维码&#xff0c;或点击内推官网https://wecruit.hotjob.cn/SU61025e262f9d247b98e0a2c2/mc/position/campus&#xff0c;使用内推码 igcefb 投递&#xff09; 【招聘岗位】 后台开发 前端开发 数据开发 数据运营 算法开发 技术运维 软件测试 产品策…

【springboot】使用thymeleaf模板

1. 导入依赖 首先&#xff0c;创建一个Spring Boot项目&#xff0c;并添加Thymeleaf依赖。在pom.xml文件中添加以下依赖&#xff1a; <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-thymeleaf</artifa…

组合逻辑元件与时序逻辑元件

组合逻辑元件和时序逻辑元件都是数字电路中的基本构建块&#xff0c;但它们在功能和结构上存在显著差异。 1. 组合逻辑元件: 内容: 组合逻辑元件的输出仅取决于当前的输入&#xff0c;而与之前的输入无关。 它们没有记忆功能。 常见的组合逻辑元件包括&#xff1a; 与门 (AND…

美图AI短片创作工具MOKI全面开放 支持生成配乐、细节修改

人工智能 - Ai工具集 - 集合全球ai人工智能软件的工具箱网站 美图公司近日宣布&#xff0c;其研发的AI短片创作工具MOKI已正式向所有用户开放。这款专注于AI短片创作的工具&#xff0c;提供了包括动画短片、网文短剧等多种类型视频内容的生成能力&#xff0c;致力于为用户带来…

文件防泄密措施有哪些?6个方法有效防止文件泄密

想象一下&#xff0c;一群穿着黑衣的神秘人在电影中潜入高保安办公室&#xff0c;绕过各种高科技安保装置&#xff0c;只为偷走里面存放的饱含机密的文件&#xff01; 听起来是不是很刺激&#xff1f; 但如果这种情况发生在现实中&#xff0c;而且发生在你的企业或个人数据上…

【中级通信工程师】综合能力:2024年真题回顾(附答案)

【零基础3天通关中级通信工程师】 综合能力&#xff1a;2024年真题回顾 本文是根据参加考试的回忆并且结合网上几版资料复原的2024年通信考试中级《综合能力》的真题考卷&#xff0c;旨在为广大考生提供复习和备考的参考&#xff0c;试卷大体和真题相符&#xff0c;部分选项回…

互联网全景消息(6)之RocketMq-NameServer源码分析

一、RocketMQ介绍 RocketMQ 是阿里巴巴集团基于高可用分布式集群技术,自主研发的云正式商用的专业消息中间件,既可为分布式应用系统提供异步解耦和削峰填谷的能力,同时也具备互联网应用所需的海量消息堆积、高吞吐、可靠重试等特性,是阿里巴巴双 11 使用的核心产品。 二、…

[Linux]:线程(二)

✨✨ 欢迎大家来到贝蒂大讲堂✨✨ &#x1f388;&#x1f388;养成好习惯&#xff0c;先赞后看哦~&#x1f388;&#x1f388; 所属专栏&#xff1a;Linux学习 贝蒂的主页&#xff1a;Betty’s blog 与Windows环境不同&#xff0c;我们在linux环境下需要通过指令进行各操作&…

MAC的几个常见的快捷方式

1.mac 查看图片好的方式 默认查看图片的方式无法直接切换上一张下一张 解决方法&#xff1a; 1.&#xff08;最好的方法&#xff09;选中图片直接按空格&#xff0c;进入快速预览图片 2.就是全部选中然后打开&#xff0c;但是说实话有点奇怪&#xff0c;而且很占内存 3.直接显示…

【JAVA开源】基于Vue和SpringBoot的网上租赁系统

本文项目编号 T 050 &#xff0c;文末自助获取源码 \color{red}{T050&#xff0c;文末自助获取源码} T050&#xff0c;文末自助获取源码 目录 一、系统介绍二、演示录屏三、启动教程四、功能截图五、文案资料5.1 选题背景5.2 国内外研究现状5.3 可行性分析5.4 用例设计5.4.1 用…

[Linux]:线程(一)

✨✨ 欢迎大家来到贝蒂大讲堂✨✨ &#x1f388;&#x1f388;养成好习惯&#xff0c;先赞后看哦~&#x1f388;&#x1f388; 所属专栏&#xff1a;Linux学习 贝蒂的主页&#xff1a;Betty’s blog 1. 初识线程 1.1 线程的概念 在操作系统中&#xff0c;进程与线程一直是我们…

Vivado - JTAG to AXI Master (GPIO、IIC、HLS_IP)

目录 1. 简介 2. JTAG to AXI Master 2.1 添加 IP Core 2.2 基本TCL命令 2.2.1 复位 JTAG-to-AXI Master 2.2.2 创建并运行写入传输事务 2.2.3 创建并运行读取传输事务 2.2.4 命令列表 2.3 帮助信息 2.4 创建TCL读写程序 2.4.1 Read proc 2.4.2 Write proc 2.4.3 …

cuda程序编译流程

cuda程序编译流程 本文以cuda example的matrixMul矩阵乘法为例说明cuda程序的编译流程。 1. 源代码 .cu 文件 在matrixMul示例中&#xff0c;源代码文件 matrixMul.cu 是典型的CUDA程序&#xff0c;包含以下部分&#xff1a; 流程图 主机代码&#xff08;Host Code&#xf…

GNSS定位中自适应调整电离层延迟参数过程噪声的方法

文章目录 前言一、非差非组合PPP模型二、电离层功率谱密度计算三、具体实现方法3.1 不平滑3.2 三阶多项式平滑 参考文献 前言 GNSS定位中不少技术手段如PPP和长基线RTK需要将电离层延迟作为参数估计&#xff0c;电离层延迟的变化通常被描述为随机游走过程&#xff0c;而功率谱密…