当前位置： 首页 > news >正文

vue-component

news 2025/7/14 6:22:11

Vue组件

1. 组件及组件化

1.1 组件和组件化是什么？

组件：是独立的、可复用的Vue的实例，是一段独立的UI视图，在代码中体现就是一个.Vue文件，并且每个组件都可以独立开发、测试和维护。

组件化：是一种代码的开发思想，实质是把一个大型复杂的页面进行拆分，拆分成一系列小的且独立的组件，通过组件的组合和拼装，就可以得到一个复杂的大型页面，化大为小，化繁为简，从而提升代码的可复用性和维护性。

1.2 组件的使用

  1. 每新建一个.vue文件，内部会默认导出这个组件对象

  2. 组件分为局部组件和全局组件

    • 局部组件无需注册，在哪个文件中使用，在哪个文件中导入即可

    • 全局组件需要在main.js中注册，一旦注册可以在任意的.vue文件中使用

  3. 把组件当作一个自定义标签使用

    • 可以是双标签，也可以是单标签

    • 可以是大驼峰的标签名MyComponent，也可以是烤串法的标签名my-component

1.3 全局组件的注册

全局组件需要在main.js中注册。

import { createApp } from 'vue'
import App from './App.vue'
import ComponentObject from './relative-path'const app = createApp(App)
app.mount('#app')
app.component('ComponentName' , ComponentObject)    # 注册全局组件 组件名建议和导入的名字一样

注册成功后，该组件可以在任意.vue文件使用。

且可以是双标签写法，也可以是单标签写法；可以是大驼峰标签名，也可以是烤串法标签名。

注意：使用component-name这类名称注册全局组件，使用时也只能用这类标签名。

app.component('component-name' , ComponentObject)      # 不能使用大驼峰标签,会显示不出来效果

2. 组件的生命周期与生命周期钩子

Vue组件的生命周期指的是一个Vue实例从创建到销毁的整个过程（创建 -> 挂载 -> 更新 -> 卸载），在整个过程中，Vue提供了一些特定的生命周期钩子函数，允许用户在不同阶段插入自定义代码。

setup()是最早执行的函数，是Vue3编写组合式API的起点。

2.1 创建阶段

钩子函数说明
beforeCreate组件实例被创建，但是数据没有被观测，函数没有初始化，因此这个时候是无法访问数据和调用方法
created组件实例创建完成，此时可以通过组件实例访问数据和方法，但尚未挂载到DOM

2.2 挂载阶段

钩子函数说明
beforeMount此时template下的标签只是编译完成，但是并没有渲染到真实的DOM中，故无法获取到DOM元素
mounted将编译完成的标签创建和插入到真实DOM中，此时可以获取DOM元素

2.3 更新阶段

钩子函数说明
beforeUpdate数据更新时调用，这里的更新指的是真实DOM前的更新，数据都是最新的，但此时访问真实DOM中的数据还是旧的
updated数据改变时，对真实DOM的更新完成，此时访问真实DOM中数据是新的

2.4 卸载阶段

钩子函数说明
beforeUnmountVue实例销毁之前调用
unmountedVue实例销毁之后调用

2.5 组合式API生命周期钩子

创建阶段挂载阶段更新阶段卸载阶段
Vue2beforeCreate
created		beforeMount
mounted		beforeUpdate
updated		beforeUnmount
unmounted
Vue3setup（网络请求）onBeforeMount
onMounted（操作DOM）		onBeforeUpdate
onUpdated		onBeforeUnmount
onUnmounted（清理工作）
<script setup>import { onMounted , onUnmounted } from 'vue'const timer = setInterval(() => { console.log("hello world") } , 1000)// 组件挂载后onMounted(() => {// DOM操作...})// 组件卸载onUnmounted(() => {clearInterval(timer)})
</script>

3. Vue组件通信

Vue组件通信是指在不同组件之间传递数据。

3.1 父子组件通信

3.1.1 父传子

父组件通过props将数组传递给子组件。

  1. 父组件通过自定义属性传递数据

  2. 子组件通过defineProps接收数据

// App.vue
<script setup>
import Item from './component/Item.vue';
// 提供数据
const obj= {id: '3998274',name: '孙悟空',age: 18,address: "花果山"
}
</script><template><div class="list">// props就是绑定在组件标签上的自定义属性<item :address="obj.address" :name="obj.name" :age="obj.age"></item></div>
</template>// Item.vue
<script setup>const props = defineProps(['address', 'name', 'age'])     // 配合插值表达式或指令使用
</script>

  • 父传子为了解决子组件在复用时显示数据不同的问题，提高子组件的灵活性。

  • props可以配合v-for遍历组件，每次循环独立传值。

3.1.2 子传父

子组件是不能修改父组件传递的数据，因为props是只读的。子组件利用emit通知父组件，让其对数据进行更新。

  1. 父组件为子组件添加自定义事件（@自定义事件名 = "父修改数据的函数"）

  2. 子组件通过defineEmits()拿到触发自定义事件的函数emit

  3. 子组件在恰当时机，触发父组件的自定义事件，并且可以传递子想要交给父的数据

// App.vue
<script setup>
import { ref } from 'vue'
import Item from './component/Item.vue';let x = ref(0)const clickAdd = (num) => {x.value += num
}
</script><template><item :num="x" @clickAdd="clickAdd"></item>
</template>// Item.vue
<script setup>const props = defineProps(['num'])const emit = defineEmits(['handleClickAdd'])const handle = () => {emit('clickAdd' , 3)}
</script><template><button @click="handle">{{ props.num }}</button>
</template>

父传子，子传父，谁的数据谁负责。

3.2 props校验

绑定在标签上的自定义属性被称为props。

props检验为组件props指定验证要求，不符合要求，控制台会有错误提示，帮助开发者，快速发现错误。

3.2.1 普通写法
const props = defineProps(['自定义属性名1', '自定义属性名2', '自定义属性名3' , ...])
3.2.2 简易写法
const props = defineProps({自定义属性名: String/Number/Boolean/Array/Object...
})
3.2.3 完整写法
const props = defineProps({自定义属性名: {type: String/Number/Boolean/Array/Object...,    // 属性的类型required: true/false,                           // 是否是必传项default: "",                                    // 默认值// ...validator(value) {    // value父传子的值// 自定义校验逻辑return true/false}}
})

  • default和required不应该同时出现，若同时出现，required优先，默认值无效。

  • default后面如果是简单类型的值，可以直接写。如果是复杂类型，则需要以函数的形式return一个默认值。() => []

3.3 非父子组件通信

3.3.1 祖先传后代

祖先组件给后代组件传值，跨层级共享数据。

  1. 祖先组件通过provide给后代提供数据

  2. 后代组件通过inject获取数据

// 1.祖先组件
import { provide } from 'vue'
provide('数据名称' , value)// 2.后代组件
import { inject } from 'vue'
const value = inject('数据名称')

祖先组件的响应式数据也会影响到后代组件。

3.3.2 任意两个组件通信

任意两个组件通信使用事件总线（EventBus），虽然Vue3移除了内置的事件总线，但可以使用第三方库如mitt （npm install --save mitt）。

// eventBus.js 
import mitt from 'mitt'
export const emitter = mitt()// 组件A (发送事件)
import emitter from './eventBus.js'
emitter.emit('event-name', { data: 'value' })// 组件B (监听事件)
import emitter from './eventBus.js'
emitter.on('event-name', (data) => {console.log(data)
})
http://www.dtcms.com/a/277202.html

相关文章：

  • [Linux入门 ] RAID存储技术概述
  • （S4）Efficiently Modeling Long Sequences with Structured State Spaces论文精读（逐段解析）
  • [Rust 基础课程]Hello World
  • 数据结构 单链表(2)--单链表的实现
  • 聊一聊Java生态接口测试常见的框架
  • 在 Spring Boot 中使用 MyBatis 的 XML 文件编写 SQL 语句详解
  • MySQL SQL语句精要：DDL、DML与DCL的深度探究
  • Design Compiler：什么是代价函数(Cost Function)
  • HarmonyOS组件/模板集成创新活动-元服务小云体重管理引入案例（步骤条UI组件）
  • python赤道上空的大气环流剖面图（纬向-高度剖面）
  • 多级@JsonTypeInfo和@JsonSubTypes注解使用详解及场景分析
  • 剑指offer59_翻转单词顺序
  • Redis 命令总结
  • Docker三剑客
  • Docker 基于 Cgroups 实现资源限制详解【实战+源码】
  • 从一个想法到一套软件——我的AI质检平台设计蓝图
  • 03.Python 字符串中的空白字符处理
  • 【爬虫】02 - 静态页面的抓取和解析
  • HTTP与HTTPS详解
  • 面试150 填充每个节点的下一个右侧节点指针Ⅱ
  • python函数快捷的传变量地址
  • 2025江苏省信息安全管理与评估赛项二三阶段任务书
  • docker 设置代理以及配置镜像加速
  • 【C++】优先队列简介与模拟实现 + 仿函数
  • Matplotlib（一）- 数据可视化与Matplotlib
  • 关于数据库的慢查询
  • python3的可变参数如何传递元组和字典
  • 一文讲懂填充与步幅
  • 《Google 软件工程》：如何写好文档？
  • 3. 【Blazor全栈开发实战指南】--Blazor是什么？为什么选择Blazor？