vue3新手入门(7)非常实用vue3技巧props父组件向子组件传递数据
今天学习一个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 时获得更好的类型检查和自动补全功能。
