Vue组件之间实现头像互传

要在Vue组件之间实现头像互传，可以使用Vue的事件机制。

首先，需要在一个Vue组件中定义一个头像属性。这个属性可以是一个字符串类型，存储头像图片的URL地址。然后，在组件中定义一个方法，当头像被点击时触发该方法，通过$emit方法触发一个事件，将头像作为参数传递出去。

比如，我们可以在一个头像组件Avatar中定义一个name属性和一个click事件，点击头像时触发该事件并将头像URL地址作为参数传递出去：

<template>
  <div class="avatar" @click="handleClick">
    <img :src="avatarUrl"/>
  </div>
</template>

<script>
export default {
  props: {
    avatarUrl: {
      type: String,
      required: true
    },
    name: {
      type: String,
      default: 'Unknown'
    }
  },
  methods: {
    handleClick() {
      this.$emit('avatar-clicked', this.avatarUrl)
    }
  }
}
</script>

然后，在另一个组件中，可以监听这个事件，并将头像作为参数传递给自己的头像属性。比如，我们可以在一个用户详情组件UserDetail中监听这个头像点击事件，并将头像设置为自己的头像：

<template>
  <div class="user-detail">
    <h2>{{name}}</h2>
    <avatar :avatar-url="avatarUrl" :name="name" @avatar-clicked="handleAvatarClicked"/>
  </div>
</template>

<script>
import Avatar from './Avatar'

export default {
  components: {
    Avatar
  },
  props: {
    name: {
      type: String,
      required: true
    },
    avatarUrl: {
      type: String,
      required: true
    }
  },
  methods: {
    handleAvatarClicked(avatarUrl) {
      this.avatarUrl = avatarUrl
    }
  }
}
</script>

这样，当用户点击Avatar组件中的头像时，会触发UserDetail组件中的handleAvatarClicked方法，并将头像URL作为参数传递给该方法，从而实现头像互传。