当前位置: 首页 > article >正文

【Vue】Vue3.0(十八)Vue 3.0中‘props‘一种使用频率最高的通信方式(全面解析)

上篇文章: 【Vue】Vue3.0(十七)Vue 3.0中Pinia的深度使用指南(基于setup语法糖)

🏡作者主页:点击!

🤖Vue专栏:点击!

⏰️创作时间:2024年11月10日19点30分

文章目录

一、props的概念

Props在Vue 3.0中是一种用于在组件之间传递数据的重要机制。它允许父组件将数据传递给子组件,实现了组件之间的通信和数据共享。Props遵循单向数据流原则,即父组件可以向子组件传递数据,但子组件不能直接修改父组件传递过来的数据。如果子组件需要修改数据,应该通过触发事件通知父组件,由父组件来进行数据的修改。

二、使用示例

  1. 定义props

在子组件中,可以使用defineProps函数来定义接收的props。假设我们有一个子组件需要接收两个props,分别是carsendToy

<template>
  <div>
    <p>Car: {{ car }}</p>
    <p>Send Toy: {{ sendToy }}</p>
  </div>
</template>

<script setup>
import { defineProps } from 'vue';

const props = defineProps(['car', 'sendToy']);
</script>
  1. 父组件传递props

在父组件中,可以通过在子组件标签上使用属性绑定的方式将数据传递给子组件。

<template>
  <div>
    <my-child-component :car="myCar" :sendToy="myToy" />
  </div>
</template>

<script setup>
import MyChildComponent from './MyChildComponent.vue';

const myCar = 'Ferrari';
const myToy = 'Teddy Bear';
</script>

在这个示例中,父组件将字符串'Ferrari''Teddy Bear'分别作为carsendToyprops传递给子组件。子组件通过defineProps接收这些props,并在模板中进行渲染。

  1. props的类型检查和默认值设置

可以通过对象的方式在defineProps中进行类型检查和设置默认值。

<template>
  <div>
    <p>Car: {{ car }}</p>
    <p>Send Toy: {{ sendToy }}</p>
  </div>
</template>

<script setup>
import { defineProps } from 'vue';

const props = defineProps({
  car: {
    type: String,
    default: 'Default Car'
  },
  sendToy: {
    type: Boolean,
    default: false
  }
});
</script>

在这个例子中,car prop的类型被指定为字符串,如果父组件没有传递car prop,子组件将使用默认值'Default Car'sendToy prop的类型被指定为布尔值,默认值为false

  1. props的验证

除了设置类型和默认值,还可以进行更复杂的验证。

<template>
  <div>
    <p>Car: {{ car }}</p>
    <p>Send Toy: {{ sendToy }}</p>
  </div>
</template>

<script setup>
import { defineProps } from 'vue';

const props = defineProps({
  car: {
    type: String,
    required: true,
    validator: (value) => value.length > 3
  },
  sendToy: {
    type: Boolean,
    validator: (value) =>!value || typeof value === 'boolean'
  }
});
</script>

在这个示例中,car prop被要求必须传递,并且长度要大于3。sendToy prop被要求如果有值,必须是布尔类型。

  1. 子组件向父组件传值(通过父组件方法)
  • 父组件
    在父组件中定义一个方法,该方法用于接收子组件传递的值,然后将这个方法通过props传递给子组件。
<template>
  <div>
    <my-child-component :car="myCar" :sendToy="myToy" :receiveValueFromChild="handleValueFromChild" />
  </div>
</template>

<script setup>
import MyChildComponent from './MyChildComponent.vue';

const myCar = 'Ferrari';
const myToy = 'Teddy Bear';

const handleValueFromChild = (value) => {
  console.log('Received value from child:', value);
  // 这里可以根据接收到的值进行相应的操作,比如更新父组件中的数据等。
};
</script>
  • 子组件
    在子组件中通过接收的父组件方法,将需要传递的值传递给父组件。
<template>
  <div>
    <button @click="sendValueToParent">Send Value to Parent</button>
  </div>
</template>

<script setup>
import { defineProps } from 'vue';

const props = defineProps(['receiveValueFromChild']);

const valueToSend = 'This is a value from child';

const sendValueToParent = () => {
  props.receiveValueFromChild(valueToSend);
};
</script>

通过以上示例,可以看出在Vue 3.0中,props和这种回调函数形式相结合,实现了子组件向父组件传递数据的功能,进一步完善了组件间通信的灵活性。这种方式在很多场景下都非常有用,比如子组件中的操作需要通知父组件进行相应处理时。


http://www.kler.cn/a/388521.html

相关文章:

  • 【Vulkan入门】08-CreateRenderPass
  • Java 装饰器模式详解:动态增强对象功能
  • Android 使用 Canvas 和 Paint 实现圆角图片
  • Linux Vi/Vim使用 ⑥
  • PSHuman 部署笔记
  • SD Express 卡漏洞导致笔记本电脑和游戏机遭受内存攻击
  • MML 中使用 libevent +std::async unix socket domain 进程间通信
  • RT-Thread 配置工具
  • 英国留学论文写作中复合句式基础知识讲解
  • 算法复杂度
  • 【SpringMVC】记录一次Bug——mvc:resources设置静态资源不过滤导致WEB-INF下的资源无法访问
  • W3C HTML 活动
  • springboot使用aop防御用户重复请求
  • Centos Linux 7 搭建邮件服务器(postfix + dovecot)
  • cv2.threshold利用OSTU方法分割图像的前景和背景
  • 从文本到图像:AIGC 如何改变内容生产的未来
  • 羲和数据集收集器1.0
  • Leetcode 3347. Maximum Frequency of an Element After Performing Operations II
  • 【k8s】ClusterIP能http访问,但是不能ping 的原因
  • 「C/C++」C/C++STL篇 之 数组赋值给std::vector多种方法
  • Ubuntu 的 ROS 2 操作系统安装与测试
  • 基于Diodes全新的140瓦PD3.1超高功率密度GaN充电器解决方案
  • 海量日志收集ELK实战(docker部署ELK)从日志中挖取宝贵数据
  • 云防护单节点2T抗攻击能力意味着什么?
  • 《深入浅出HTTPS​​​​​​​》读书笔记(7):安全的密码学Hash算法
  • 全局注册和局部注册