Vue3组件通讯（父子组件通讯）详解

1、父子通讯-父传子

前置知识：

setup函数有两个参数第一个参数为props，第二个参数为一个对象context

props为一个对象，内部包含了父组件传递过来的所有prop数据

context对象包含了attrs，slots， emit属性，其中的emit可以触发自定义事件的执行从而完成子传父

父传子：

代码示例：

父组件：app.vue

<template>
<div style="border:1px solid #ccc;margin:1em;padding:1em">

  <h1>父组件</h1>
  <p>父组件:{
  {list}}</p>
  <Son :list="list" />
</div>
</template>
<script>
import Son from './son.vue'
import { reactive } from 'vue'
export default {