父组件传值

<template>
  <h1>列表</h1>
  <hr />
  <Child :total="list.length" :list="list"></Child>
</template>

<script setup lang="ts">
import Child from "./Child.vue";
import { reactive } from "vue";
let list = reactive([{ label: "语文" }, { label: "数学" }, { label: "英语" }]);
</script>

子组件接收

<template>
  <div v-for="(item, index) in list" :key="index">{{ item.label }}</div>
  <button @click="updateProps">增加</button>
</template>

<script setup lang="ts">
/**
 * 需要使用到defineProps方法去接受父组件传递过来的数据
 * defineProps是Vue3提供方法,不需要引入直接使用
 * let props = defineProps(["total", "list"]); //数组|对象写法都可以
 */
let props = defineProps({
  total: Number,
  list: Array,
});
//按钮点击的回调
const updateProps = () => {
  // 普通类型只读无法修改
  // props.total += 1;
  // 对象/数组类型能改，但不推荐
  props.list!.push({ label: "化学" });
  // 不推荐修改props的值，应该抛出一个事件来通知父组件做出改变。
  // https://cn.vuejs.org/guide/components/props.html#one-way-data-flow
};
</script>