使用vue2创建一个头像组件,组件接受size及src两个参数,size用于控制头像大小,src用于控制头像图片,切该组件在父容器中居中显示,上下有合适的外边距

在 Vue.js 中创建一个可复用的头像组件，首先你需要定义一个新的 `.vue` 文件，例如 `Avatar.vue`。在这个文件中，你可以按照以下步骤来编写：

<!-- Avatar.vue -->
<template>
  <div class="avatar-container">
    <img :src="src" alt="用户头像" :style="{ width: size + 'px', height: size + 'px', display: 'block', margin: 'auto' }" />
  </div>
</template>

<script>
export default {
  name: 'Avatar',
  props: {
    // 定义组件接收的两个参数
    size: { type: Number, required: true }, // 控制头像大小
    src: { type: String, required: true }      // 控制头像图片地址
  }
}
</script>

<style scoped>
.avatar-container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem; // 上下适当外边距
  margin-bottom: 1rem; // 底部外边距可以根据需求调整
}
</style>

这个组件的`template`部分包含了图片元素，`v-bind`指令用于绑定属性。`props`定义了父组件传递给子组件的参数。`style`部分设置了组件的样式，使其在父容器内居中显示。

要使用这个组件，只需要在父组件中这样调用：

<!-- 使用示例 -->
<Avatar :size="50" :src="user.avatarUrl" />

其中，`user.avatarUrl` 是从数据或API获取到的实际头像URL。

相关问题：

1. 如何在Vue中声明组件的prop？
. 为什么要使用`:style`绑定样式而非直接写在模板里？
3. 如何使Vue组件内的内容居中显示？