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

相关推荐
Mr_Xuhhh1 分钟前
重生之我在学环境变量
linux·运维·服务器·前端·chrome·算法
永乐春秋1 小时前
WEB攻防-通用漏洞&文件上传&js验证&mime&user.ini&语言特性
前端
鸽鸽程序猿1 小时前
【前端】CSS
前端·css
ggdpzhk1 小时前
VUE:基于MVVN的前端js框架
前端·javascript·vue.js
小曲曲2 小时前
接口上传视频和oss直传视频到阿里云组件
javascript·阿里云·音视频
学不会•3 小时前
css数据不固定情况下,循环加不同背景颜色
前端·javascript·html
EasyNTS4 小时前
H.264/H.265播放器EasyPlayer.js视频流媒体播放器关于websocket1006的异常断连
javascript·h.265·h.264
活宝小娜5 小时前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
程序视点5 小时前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
coldriversnow6 小时前
在Vue中,vue document.onkeydown 无效
前端·javascript·vue.js