今天学习一个vue3中非常常见的技巧，props，可以从父组件向子组件传递数据。教程使用文章数据类型来做演示

基本使用

首先在使用ts的接口约束下数据类型，在types中新建一个article.ts的文件

export interface Article {
   id:number;
  title: string;
  content: string;
}
export type Articles = Array<Article>

定义了Article的数据，里面有id，title，content。又定义了一个Articles的类型，它是一个Article类型的数组。

父组件Article.vue的代码，父组件中引用子组件ArticleList，并且把定义的articles数据通过名为articles传递给子组件。注意前面需要加上：不然会默认为字符串。

<template>
<ArticleList :articles="articles"/>

</template>
<script lang="ts" setup name="Article">
    import { reactive } from 'vue';
    import { Articles} from '../types/article';
    import ArticleList from './ArticleList.vue'
    let articles = reactive<Articles>([
    {id:1,title:"标题1",content:"内容1"},
    {id:2,title:"标题2",content:"内容2"},
    {id:3,title:"标题3",content:"内容3"}
    ])
</script>
<style>
</style>

子组件的代码，关键地方下面两行代码，导入defineProps。通过这个接收到articles.这样在子组件的模版中就可直接使用了。

import {defineProps} from "vue"
let props = defineProps(['articles'])

<template>
 <div class="content">
<ul>
<li v-for="item in articles">
 {{ item.title }}--{{item.content}}
</li>
</ul>
</div>
</template>

<script lang="ts" setup name="Article">
import {defineProps} from "vue"
let props = defineProps(['articles'])
</script>

<style>
</style>

代码运行效果如下：

这个就是一个简单的通过props传递数据了。

注意事项

• props 是单向数据流。父组件可以传递数据到子组件，但子组件不能直接修改 props。如果需要基于 props 的值计算新值，应该使用计算属性或 watch 监听器。
• 如果需要修改从父组件传入的 props，通常建议通过事件向父组件发送信号，由父组件来修改并重新传递数据。
• Vue 3 鼓励使用 TypeScript，这可以让你在定义 props 时获得更好的类型检查和自动补全功能。