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