vue3组件通信与props
title: vue3组件通信与props
date: 2024/5/31 下午9:00:57
updated: 2024/5/31 下午9:00:57
categories:
- 前端开发
tags:
- Vue3组件
- Props详解
- 生命周期
- 数据通信
- 模板语法
- Composition API
- 单向数据流
Vue 3 组件基础
在 Vue 3 中,组件是构建用户界面的基本单位,它们是可复用的 Vue 实例,具有自己的模板、数据、方法等。组件化开发使得代码更加模块化,易于管理和维护。以下是 Vue 3 组件的基础知识:
1. 组件的创建与注册
在 Vue 3 中,组件需要先定义后使用。定义组件的方式有两种:全局注册和局部注册。
全局注册
全局注册的组件可以在任何地方使用,通过 app.component
方法进行注册:
import { createApp } from 'vue';
import App from './App.vue';
const app = createApp(App);
app.component('my-component', {
// 组件选项
});
app.mount('#app');
局部注册
局部注册的组件只能在注册它的组件内部使用,通常在组件的 components
选项中进行注册:
export default {
components: {
'my-component': {
// 组件选项
}
}
}
2. 组件选项
组件选项包括模板、数据、方法、生命周期钩子等。
模板 (Template)
组件的模板定义了组件的结构,可以使用 HTML 和 Vue 的模板语法:
<template>
<div>
<h1>{{ title }}</h1>
<p>{{ content }}</p>
</div>
</template>
数据 (Data)
组件的数据是响应式的,需要是一个函数,返回一个数据对象:
export default {
data() {
return {
title: 'Hello Vue 3',
content: 'Welcome to Vue 3 component basics.'
};
}
}
方法 (Methods)
组件的方法定义在 methods
选项中,可以在模板中通过事件绑定来调用:
export default {
methods: {
greet() {
alert('Hello from Vue 3 component!');
}
}
}
生命周期钩子 (Lifecycle Hooks)
Vue 3 提供了多个生命周期钩子,允许你在组件的不同阶段执行代码。例如:
export default {
created() {
console.log('Component created');
},
mounted() {
console.log('Component mounted');
}
}
3. 组件通信
组件之间的通信是 Vue 应用中的常见需求,Vue 3 提供了多种通信方式,包括 props、自定义事件、插槽等。
Props
Props 允许父组件向子组件传递数据:
// 子组件
export default {
props: {
message: String
}
}
// 父组件
<child-component :message="hello"></child-component>
自定义事件
子组件可以通过自定义事件向父组件传递数据:
// 子组件
this.$emit('my-event', data);
// 父组件
<child-component @my-event="handleEvent"></child-component>
插槽 (Slots)
插槽允许父组件向子组件传递内容:
<!-- 子组件 -->
<slot></slot>
<!-- 父组件 -->
<child-component>
<p>This content is passed to the child component via slot.</p>
</child-component>
4. 组件的复用与组合
Vue 3 鼓励组件的复用和组合,通过 props、插槽等方式,可以构建出高度可复用的组件库。同时,Vue 3 还引入了 Composition API,使得组件的逻辑更加清晰和易于复用。
什么是 props?
在 Vue.js 框架中,props
是一个组件的属性,它可以接收来自父组件的数据,并将其传递到子组件中。props
使得子组件能够接收外部传入的信息,从而可以在不需要知道外部具体细节的情况下,实现与父组件的交互和数据传递。
Props 的作用
- 传参:父组件可以通过
props
将数据传递给子组件。 - 验证数据类型:在定义
props
时,可以指定期望的数据类型,这样 Vue 会在开发过程中进行类型检查,并在浏览器控制台中抛出警告,有助于提前发现潜在问题。 - 设置默认值:如果父组件没有传递相应的
prop
,可以设置默认值以确保子组件能够接收到一个合理的默认值。
Props 的使用
在 Vue 3 中,定义 props
的方式有几种,包括使用字符串数组、对象形式以及使用 TypeScript 的类型注解。
字符串数组形式
export default {
props: ['message']
}
这表示组件期望接收一个名为 message
的 prop
,它是一个字符串类型。
对象形式
export default {
props: {
message: String,
title: {
type: String,
default: 'Default Title'
}
}
}
这种方式下,message
被指定为字符串类型,而 title
被指定为字符串类型,并且有一个默认值。
TypeScript 类型注解
在使用 TypeScript 时,可以利用类型注解来定义 props
:
export default {
props: {
message: string,
title: string
}
}
Props 的传递
在父组件中,通过在模板中使用 v-bind
指令或者简写为 :
来传递 props
:
<!-- 父组件 -->
<child-component :message="parentMessage"></child-component>
在这里,parentMessage
是父组件中的一个数据属性,它将被传递给名为 child-component
的子组件。
Props 的验证
在 Vue.js 中,props
验证是指对组件传入的 props
进行类型检查和默认值设置等验证。Vue 提供了一个可选的验证功能,可以在定义 props
时进行设置。以下是一些常见的 props
验证规则:
- 类型验证:可以指定
props
的类型,如String
、Number
、Boolean
、Array
、Object
等。 - 默认值:可以为
props
设置默认值,如果未传入prop
,则使用默认值。 - 必需性:可以指定
props
是否为必需,如果为必需,则必须在父组件中传入。 - 自定义验证:可以使用
validator
函数进行自定义验证。 - 单位转换:对于数值类型,可以指定单位,如
px
、%
等,Vue 会自动进行单位转换。
下面是一个使用 props
验证的例子:
export default {
props: {
// 基本类型验证
title: {
type: String,
default: '默认标题'
},
// 数值类型验证,可以指定单位
width: {
type: Number,
default: 100,
validator: (value) => {
return value >= 0; // 自定义验证,确保宽度非负
}
},
// 数组类型验证
items: {
type: Array,
default: () => []
},
// 对象类型验证
config: {
type: Object,
default: () => ({})
},
// 布尔值类型验证
isActive: {
type: Boolean,
default: false
}
}
}
在这个例子中,title
被验证为字符串类型,有一个默认值;width
被验证为数值类型,有一个默认值,并且有一个自定义的验证函数确保它非负;items
被验证为数组类型,有一个默认的空数组;config
被验证为对象类型,有一个默认的空对象;isActive
被验证为布尔类型,有一个默认的 false
值。
如果父组件传递给子组件的 props
不满足这些验证规则,Vue 将抛出一个警告。这些验证规则有助于确保组件接收到的数据是预期的类型和格式,从而提高组件的健壮性。AD:首页 | 一个覆盖广泛主题工具的高效在线平台
动态Props
在Vue中,动态Props指的是父组件向子组件传递的Props值可以在运行时动态确定。这可以通过使用v-bind
指令或简写为:
来实现。动态Props的值可以是表达式、计算属性或方法返回的结果。
<template>
<ChildComponent :prop-name="dynamicValue" />
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
data() {
return {
dynamicValue: '动态值'
};
}
};
</script>
单向数据流
在Vue中,单向数据流指的是数据只能从父组件流向子组件,不能反向流动。这是通过props
和emit
方法实现的。props
用于父组件向子组件传递数据,而emit
方法允许子组件向父组件发送事件。
AD:专业搜索引擎
父子组件通信
父子组件通信主要有以下几种方式:
- Props:父组件通过Props向子组件传递数据。
- **\(emit 方法**:子组件通过`\)emit
方法触发事件,父组件通过
@eventName`监听这些事件。
<!-- 父组件 -->
<template>
<ChildComponent @child-event="handleChildEvent" />
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
methods: {
handleChildEvent(data) {
console.log('收到子组件的事件:', data);
}
}
};
</script>
<!-- 子组件 -->
<template>
<button @click="sendMessageToParent">发送消息给父组件</button>
</template>
<script>
export default {
methods: {
sendMessageToParent() {
this.$emit('child-event', 'Hello from child!');
}
}
};
</script>
非父子组件通信
非父子组件通信有以下几种方式:
- Provide 和 Inject:祖先组件通过
provide
选项来提供变量,所有的子孙组件都可以通过inject
选项来接收这个变量。
AD:漫画首页 - Event Bus:创建一个中央事件总线实例,不同组件通过触发或监听事件来进行通信。
// 创建Event Bus实例
const eventBus = new Vue();
// 祖先组件
eventBus.$emit('update-data', 'some data');
// 后代组件
eventBus.$on('update-data', (data) => {
console.log('收到数据:', data);
});
Props 的限制
- 类型限制:可以指定
props
的类型,如String
、Number
、Boolean
等。 - 默认值:可以为
props
设置默认值。 - 必需性:可以指定
props
是否为必需。 - 自定义验证:可以使用
validator
函数进行自定义验证。 - 单位转换:对于数值类型,可以指定单位,如
px
、%
等,Vue会自动进行单位转换。
总结
Vue.js通过提供灵活的组件通信机制,使得前端开发更加高效和模块化。父子组件之间的通信通过props
和emit
实现,遵循单向数据流原则;非父子组件间则可以通过provide
和inject
,或者事件总线来实现。这些通信机制不仅使得组件之间的数据传递更加清晰,也提高了应用的可维护性。同时,props
的验证机制确保了组件接收到的数据是符合预期格式的,增加了组件的稳定性。
vue3组件通信与props的更多相关文章
- vue组件通信(props,$emit,$attrs,$listeners)
朝颜陌 vue基础----组件通信(props,$emit,$attrs,$listeners) 一.父传子,子传孙 1. props 1>在父组件中通过子组件自定义的标签属性来传递数据. ...
- vue基础----组件通信(props,$emit,$attrs,$listeners)
一.父传子,子传孙 1. props 1>在父组件中通过子组件自定义的标签属性来传递数据. 2>在子组件中通过props声明希望用到的数据 <body> <div id= ...
- 【Vue组件通信】props、$ref、$emit,组件传值
1.什么是组件通信 组件间如何通信,也就成为了vue中重点知识,组件通信,涉及到组件之间数据的传递.类似NET POST/GET参数传递. Vue基本的三种传递方式** (props.\(ref.\) ...
- 详细讲解vue.js里的父子组件通信(props和$emit)
在进入这个话题之前,首先我们先来想一下在vue里,如何写一个父子组件.为了简单起见,下面的代码我都没用脚手架来构建项目,直接在html文件里引入vue.js来作为例子.父子组件的写法如下: <d ...
- Vue中组件通信的几种方法(Vue3的7种和Vue2的12种组件通信)
Vue3组件通信方式: props $emit expose / ref $attrs v-model provide / inject Vuex 使用方法: props 用 props 传数据给子组 ...
- react组件通信那些事儿
父组件是调用组件的组件.现在看来,感觉父组件就是一个壳子,定义好壳子里面会有什么,而子组件是一个具体的实现,说明,会用到什么东西,如果有这些东西,会进行什么操作.总之,父组件是材料,有水和泥,子组件告 ...
- vue2.X 组件通信($emit $on props)
1.index.html 子组件直接修改父组件的数据 组件通讯: vm.$emit(); vm.$on(); 父组件和子组件: 子组件想要拿到父组件数据: 通过 props 之前,子组件可以更改父组 ...
- vue 父子组件通信props/emit
props 1.父组件传递数据给子组件 父组件: <parent> <child :childMsg="msg"></child>//这里必须要 ...
- Vue 组件通信的多种方式(props、$ref、$emit、$attr、 $listeners)
prop和$ref之间的区别: prop 着重于数据的传递,它并不能调用子组件里的属性和方法.像创建文章组件时,自定义标题和内容这样的使用场景,最适合使用prop. $ref 着重于索引,主要用来调用 ...
- vue第八单元(组件通信 子父,父子组件通信 自定义事件 事件修饰符 v-model props验证 )
第八单元(组件通信 子父,父子组件通信 自定义事件 事件修饰符 v-model props验证 ) #课程目标 掌握使用props让父组件给子组件传参(重点) 掌握props属性的使用以及prop验证 ...
随机推荐
- 力扣378(java&python)-有序矩阵中第 K 小的元素(中等)
题目: 给你一个 n x n 矩阵 matrix ,其中每行和每列元素均按升序排序,找到矩阵中第 k 小的元素.请注意,它是 排序后 的第 k 小元素,而不是第 k 个 不同 的元素. 你必须找到一个 ...
- [ARC174B] Bought Review 题解
[题目描述] 你开了一家店,有 \(A_i\) 个 \(i\) 星级评论,你可以花费 \(P_i\) 元买到一个 \(i\) 星评论,问使得这家店评论的星星平均值不小于 \(3\),最少要花多少钱. ...
- Serverless JOB | 传统任务新变革
简介: SAE Job 重点解决了用户的效率和成本问题,在兼具传统任务使用体验和功能的同时按需使用,按量计费,做到低门槛任务上云,节省闲置资源成本. Job 作为一种运完即停的负载类型,在企业级开发中 ...
- 3千字带你搞懂XXL-JOB任务调度平台
思维导图 文章已收录Github精选,欢迎Star:https://github.com/yehongzhi/learningSummary 一.概述 在平时的业务场景中,经常有一些场景需要使用定时任 ...
- 实操指南 | Resource Queue如何实现对AnalyticDB PostgreSQL的资源管理?
简介: 作者:阿里云数据库OLAP产品部 - 子华 一 背景 AnalyticDB PostgreSQL版(简称ADB PG)是阿里云数据库团队基于PostgreSQL内核(简称PG)打造的一款云原生 ...
- [Blockchain] (Binance Smart Chain) BSC 测试网 BNB 水龙头
测试网BNB水龙头 https://testnet.binance.org/faucet-smart 测试网区块浏览器 https://testnet.bscscan.com 主网区块浏览器 http ...
- 9.prometheus监控--监控springboot2.x(Java)
一.环境部署 yum search java | grep jdk yum install -y java-11-openjdk-devel 二.监控java应用(tomcat/jar) JMX ex ...
- go语言package使用
近期接触go感觉package包之间引用很麻烦,很绕圈子.下面一起理一理这个package咋用 关于package: 1.不限于一个文件,可以多个文件组成一个package 2.不要求package的 ...
- 什么是SQL 语句中相关子查询与非相关子查询
1.什么是SQL子查询 要理解相关子查询和非相关子查询,我们得首先理解什么是子查询,子查询是指在一个查询语句中嵌套的另一个查询语句. 子查询可以嵌套在其他查询语句中,如 SELECT.INSERT.U ...
- 阿里巴巴Canal常见问题:重复解析/Filter失效/消费落后
前言 Canal是阿里巴巴开源的数据库Binlog日志解析框架,主要用途是基于 MySQL 数据库增量日志解析,提供增量数据订阅和消费. 在之前我写的文章阿里开源MySQL中间件Canal快速入门中, ...