【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

html 复制代码
<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

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

html 复制代码
<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中进行类型检查和设置默认值。

html 复制代码
<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的验证

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

html 复制代码
<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传递给子组件。
html 复制代码
<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>
  • 子组件
    在子组件中通过接收的父组件方法,将需要传递的值传递给父组件。
html 复制代码
<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和这种回调函数形式相结合,实现了子组件向父组件传递数据的功能,进一步完善了组件间通信的灵活性。这种方式在很多场景下都非常有用,比如子组件中的操作需要通知父组件进行相应处理时。

相关推荐
毋若成42 分钟前
前端三大组件之CSS,三大选择器,游戏网页仿写
前端·css
红中马喽1 小时前
JS学习日记(webAPI—DOM)
开发语言·前端·javascript·笔记·vscode·学习
Black蜡笔小新2 小时前
网页直播/点播播放器EasyPlayer.js播放器OffscreenCanvas这个特性是否需要特殊的环境和硬件支持
前端·javascript·html
秦jh_3 小时前
【Linux】多线程(概念,控制)
linux·运维·前端
蜗牛快跑2133 小时前
面向对象编程 vs 函数式编程
前端·函数式编程·面向对象编程
Dread_lxy3 小时前
vue 依赖注入(Provide、Inject )和混入(mixins)
前端·javascript·vue.js
涔溪4 小时前
Ecmascript(ES)标准
前端·elasticsearch·ecmascript
榴莲千丞4 小时前
第8章利用CSS制作导航菜单
前端·css
奔跑草-4 小时前
【前端】深入浅出 - TypeScript 的详细讲解
前端·javascript·react.js·typescript
羡与4 小时前
echarts-gl 3D柱状图配置
前端·javascript·echarts