Vue3 Props父子组件传值

---

前言

多用于封装组件时，我们界定好一些不变的属性，再暴露一些支持自定义的属性，这些支持自定义的属性就要通过Props传值，比如支持自定义尺寸就如下例。

---

一、子组件的准备

我们要先准备好接收数据的那一套东西，这里就用我封装的一个头像组件来举例吧：
本处:style="[xxx, xxx]"这种格式为vue2.6新增，数组内部的元素为computed内的方法名，这样写相当于调用这些方法，而这些方法内返回根据props内相应值计算的产物来规定动态的style属性值。

子组件:

<!--我去掉了一些没用的属性,另外我决定把size值渲染出来,这样会直观一些 -->
 <div class="sy-avatar" :style="[size]">{
  {data.size}}</div>

import {
    reactive