VUE3 常用的组件介绍

news/2025/1/12 7:29:07/

Vue 组件简介

Vue 组件是构建 Vue 应用程序的核心部分,组件帮助我们将 UI 分解为独立的、可复用的块,每个组件都有自己的状态和行为。Vue 组件通常由模板、脚本和样式组成。组件的脚本部分包含了各种配置选项,用于定义组件的逻辑和功能。

组件的常见选项及其描述
  1. data

    • 描述data 选项用于定义组件的响应式数据。它是一个函数,返回一个对象,这个对象包含了该组件的初始状态。
    • 示例
      javascript">data() {return {message: 'Hello, Vue!'};
      }
      
  2. methods

    • 描述methods 选项用于定义组件的方法,方法可以在模板中通过事件绑定进行调用。它们通常用于处理用户输入、事件响应或其他操作。
    • 示例
      javascript">methods: {greet() {console.log(this.message);}
      }
      
  3. computed

    • 描述computed 选项用于定义计算属性,它是基于响应式数据进行计算的,并且只有在依赖的响应式数据发生变化时才会重新计算。它们常用于根据已有数据衍生出新的数据。
    • 示例
      javascript">computed: {reversedMessage() {return this.message.split('').reverse().join('');}
      }
      
  4. watch

    • 描述watch 选项用于监听响应式数据的变化,可以在数据变化时执行某些操作,比如异步操作或调试。watch 是响应式数据的“观察者”。
    • 示例
      javascript">watch: {message(newValue, oldValue) {console.log(`Message changed from ${oldValue} to ${newValue}`);}
      }
      
  5. props

    • 描述props 选项用于从父组件传递数据到子组件。它定义了父组件传递给子组件的属性,可以用于传递基本数据类型或对象。
    • 示例
      javascript">props: {title: String
      }
      
  6. created

    • 描述created 是生命周期钩子之一,组件实例在创建后立即被调用,此时数据已初始化,但 DOM 尚未挂载。
    • 示例
      javascript">created() {console.log('Component created');
      }
      
  7. mounted

    • 描述mounted 是生命周期钩子之一,组件实例被挂载到 DOM 后立即被调用。在这个阶段,可以访问到 DOM 元素。
    • 示例
      javascript">mounted() {console.log('Component mounted');
      }
      
  8. beforeDestroy

    • 描述beforeDestroy 是生命周期钩子之一,在组件实例销毁之前调用。此时,组件仍然处于 DOM 中。
    • 示例
      javascript">beforeDestroy() {console.log('Component about to be destroyed');
      }
      
  9. destroyed

    • 描述destroyed 是生命周期钩子之一,在组件实例销毁后立即调用。此时,组件从 DOM 中移除。
    • 示例
      javascript">destroyed() {console.log('Component destroyed');
      }
      
  10. emits

    • 描述emits 用于声明组件会触发的自定义事件。通过这个选项可以限制和验证组件能够触发的事件。
    • 示例
      javascript">emits: ['update', 'submit']
      
  11. inheritAttrs

    • 描述inheritAttrs 选项控制是否自动将父组件传递的属性绑定到子组件的根元素上。设置为 false 时,可以自定义如何传递属性。
    • 示例
      javascript">inheritAttrs: false
      
  12. name

    • 描述name 用于给组件指定一个名称,通常用于调试或递归组件时。
    • 示例
      javascript">name: 'MyComponent'
      
  13. directives

    • 描述directives 选项用于定义自定义指令。Vue 允许通过 directives 选项注册全局或局部指令。
    • 示例
      javascript">directives: {focus: {inserted(el) {el.focus();}}
      }
      
  14. provideinject

    • 描述provide 和 inject 用于父子组件之间的跨级数据传递。provide 在父组件中定义,inject 在子组件中使用。它们允许跨越多级组件传递数据而不必一层层通过 props
    • 示例
      javascript">provide() {return {message: 'Hello from parent'};
      }inject: ['message']
      

总结

这些选项构成了 Vue 组件的核心,它们让我们能够定义组件的状态、行为和生命周期。每个选项都有其独特的用途,可以帮助我们根据需要定制组件的功能。

如果你有其他问题或需要进一步的解释,随时告诉我!


http://www.ppmy.cn/news/1562437.html

相关文章

ISP流程--去马赛克详解

前言 本期我们将深入讨论ISP流程中的去马赛克处理。我们熟知,彩色图像由一个个像元组成,每个像元又由红、绿、蓝(RGB)三通道构成。而相机传感器只能感知光的强度,无法直接感知光谱信息,即只有亮暗而没有颜色…

计算机网络 (33)传输控制协议TCP概述

一、定义与基本概念 TCP是一种面向连接的、可靠的、基于字节流的传输层通信协议。它工作在OSI模型的第四层,即传输层,为用户提供可靠的、有序的和无差错的数据传输服务。TCP协议与UDP协议是传输层的两大主要协议,但两者在设计上有明显的不同&…

搭建Hadoop分布式集群

软件和操作系统版本 Hadoop框架是采用Java语言编写,需要java环境(jvm) JDK版本:JDK8版本 ,本次使用的是 Java: jdk-8u431-linux-x64.tar.gz Hadoop: hadoop-3.3.6.tar.gz 三台Linux虚拟节点: CentOS-7-x86_64-DVD-2…

LeetCode hot100-96

136. 只出现一次的数字 给你一个 非空 整数数组 nums ,除了某个元素只出现一次以外,其余每个元素均出现两次。找出那个只出现了一次的元素。你必须设计并实现线性时间复杂度的算法来解决此问题,且该算法只使用常量额外空间。这题的解答挺有意…

Streamlit+Selenium快速构建一个网络爬虫应用

项目需要从网上爬取数据,用了八爪鱼来进行测试,可以通过自定义任务,不需要编程即可实现对于数据的爬取,但是缺点是免费版本自定义任务有数量限制,另外在采集过程的控制上还不够便利,对于熟悉Python编程的人…

【含开题报告+文档+PPT+源码】基于SpringBoot+Vue的爱家园管理系统

开题报告 随着社会的不断发展,人们对于生育、婚姻的观念也在不断变化。然而,这些观念的变化往往伴随着一些问题和挑战。例如,一些年轻夫妇对于生育和婚姻感到迷茫和焦虑,而一些中年人则面临着婚姻危机或情感困扰。此外&#xff0…

C#使用OpenTK绘制一个着色矩形

OpenTK介绍 OpenTK是一个开源、跨平台的游戏开发库,由MonoGame团队创建。它为C#开发者提供了一个简单易用的接口,以便使用OpenGL、OpenAL和OpenCL进行3D渲染、音频处理和并行计算。OpenTK的目标是提供一个一致且高效的框架,让开发者能够专注…

DDD - 如何运用 DDD 进行数据库设计

文章目录 Pre概述领域对象持久化的思想领域模型的设计传统的 4 种关系1. 一对一关系2. 多对一关系3. 一对多关系4. 多对多关系 继承关系的 3 种设计1. 继承关系的第一种方案:整个父类与子类都写入一张表2. 继承关系的第二种方案:各子类各自对应各自的表3…