持续创作，加速成长！这是我参与「掘金日新计划 · 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的形式，派发一个事件，通知父组件进行修改。