我现在有user-header一个组件，里面有一个头像和一个名称：

我们在index.vue中使用三次该组件：

我们现在要给这三个<user-header></user-header>进行传值，使他们根据传入值来显示头像和名称。

一、index.vue传值

<标签名 传值变量1="值1" 传值变量2="值2"></标签名>

也可以传入响应式变量（传值变量前需要加冒号）：

 二、user-head.vue接收值

defineProps(['传值变量1', '传值变量2']);

效果展示：

 

我们不能直接对props进行修改！

但是我们可以先接收props的值，再对值进行修改，如我现在需要给每个名称前面加上一个"@":