今天学习一个vue3中非常常见的技巧，props，可以从父组件向子组件传递数据。教程使用文章数据类型来做演示
基本使用
首先在使用ts的接口约束下数据类型，在types中新建一个article.ts的文件
export interface Article {
id:number;
title: string;
content: string;
}
export type Articles = Array定义了Article的数据，里面有id，title，content。又定义了一个Articles的类型，它是一个Article类型的数组。
父组件Article.vue的代码，父组件中引用子组件ArticleList，并且把定义的articles数据通过名为articles传递给子组件。注意前面需要加上：不然会默认为字符串。
([
{id:1,title:"标题1",content:"内容1"},
{id:2,title:"标题2",content:"内容2"},
{id:3,title:"标题3",content:"内容3"}
])
</script>
子组件的代码，关键地方下面两行代码，导入defineProps。通过这个接收到articles.这样在子组件的模版中就可直接使用了。
import {defineProps} from "vue"
let props = defineProps(['articles'])
-
{{ item.title }}--{{item.content}}
<script lang="ts" setup name="Article">
import {defineProps} from "vue"
let props = defineProps(['articles'])
</script>
代码运行效果如下：
父组件传递子组件数据运行效果
这个就是一个简单的通过props传递数据了。
注意事项
- props 是单向数据流。父组件可以传递数据到子组件，但子组件不能直接修改 props。如果需要基于 props 的值计算新值，应该使用计算属性或 watch 监听器。
- 如果需要修改从父组件传入的 props，通常建议通过事件向父组件发送信号，由父组件来修改并重新传递数据。
- Vue 3 鼓励使用 TypeScript，这可以让你在定义 props 时获得更好的类型检查和自动补全功能。