前言

前面的章节中我们大概讲了下 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 的形式，派发一个事件，通知父组件进行修改。