持续创作,加速成长!这是我参与「掘金日新计划 · 10 月更文挑战」的第5天,点击查看活动详情
前言
前面的章节中我们大概讲了下props的用处以及其的使用方法,但是如果想进一步了解的话,肯定是不够的。所以今天呢,我们就带大家来具体聊一聊props的声明方式以及一些细节,并聊一聊她的特性--单向数据流。
声明
对于props的声明,我们可以使用Vue内置的 defineProps()方法来进行。但除了使用我们提到的,使用数组的形式除外,
<script setup>
const props = defineProps(['content'])
console.log(props.content)
</script>
还可以使用对象的形式:
// 使用 <script setup>
defineProps({
content: String,
member: Number
})
对于使用对象的形式,其的每个key对应相应的props值,而对象的值对应的是相应的prop预期收到什么类型的值。
而这种方式,Vue对于传入错误的值,可以更好的进行提示,到达更好的反馈。
props的传递小知识点
- 如果我们想要传入Number类型的 prop时,不能直接传入,因为会识别成字符串,需要通过动态prop的形式。
<!-- 通过动态prop的形式就不会把数字识别成字符串了,因为会识别成一个表达式 -->
<Content :member="66" />
<!-- 动态prop -->
<Content :member="post.member" />
- 当我们需要传递多个props的时候,我们就可以把他整合成一个对象,在进行传递。
const article = {
member: 1,
content: '文章内容'
}
<Content v-bind="article" />
单向数据流
对于props的数据传递方案,vue采用了单向数据流的形式。换言之,只有的父组件的数据发生了改变,传递的prop才会发生改变,单向传递,不会逆向传递。而这样的好处,也显而易见,很好的避免的子组件和父组件同时修改同一份数据而导致的混乱。
所以说,如果想对数据修改,可以通过emit的形式,派发一个事件,通知父组件进行修改。