【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遵循单向数据流原则，即父组件可以向子组件传递数据，但子组件不能直接修改父组件传递过来的数据。如果子组件需要修改数据，应该通过触发事件通知父组件，由父组件来进行数据的修改。

二、使用示例

定义props

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

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>

父组件传递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'分别作为car和sendToyprops传递给子组件。子组件通过defineProps接收这些props，并在模板中进行渲染。

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。

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被要求如果有值，必须是布尔类型。

子组件向父组件传值（通过父组件方法）

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