vue脚手架定义3个组件，组件A向组件C传递姓名，组件B向组件C传递数组爱好，组件C接收组件A和组件B传递过来的参数并显示出来

首先，在组件A和组件B中定义一个方法，用来将数据传递给父组件，代码如下：

// 组件A
<template>
  <div>
    <button @click="sendName">发送姓名</button>
  </div>
</template>

<script>
export default {
  methods: {
    sendName() {
      this.$emit('send-name', '张三')
    }
  }
}
</script>


// 组件B
<template>
  <div>
    <button @click="sendHobbies">发送爱好</button>
  </div>
</template>

<script>
export default {
  methods: {
    sendHobbies() {
      this.$emit('send-hobbies', ['篮球', '足球', '游泳'])
    }
  }
}
</script>

然后，在组件C中接收组件A和组件B传来的数据，并显示出来，代码如下：

// 组件C
<template>
  <div>
    <p>姓名：{{ name }}</p>
    <p>爱好：</p>
    <ul>
      <li v-for="hobby in hobbies" :key="hobby">{{ hobby }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: '',
      hobbies: []
    }
  },
  mounted() {
    // 监听组件A传来的姓名
    this.$on('send-name', (name) => {
      this.name = name
    })
    // 监听组件B传来的爱好
    this.$on('send-hobbies', (hobbies) => {
      this.hobbies = hobbies
    })
  }
}
</script>

这样，当组件A点击按钮时，会向父组件发送姓名；当组件B点击按钮时，会向父组件发送爱好。组件C接收到数据后，会显示出来。