vue组件复用，传入不同数据但只显示一条数据

Question

<msg :msgs="info"/>
<msg :msgs="message"/>
<msg :msgs="word"/>

// 全局组件
 Vue.component("msg",{
  props: {
    msgs: Object
  },
  template: `<div>
              {{msgs}}
            </div>`
 })
 //实例
 var vm = new Vue({
    el: "#app",
    data () {
      return {
        info:{name: "小红", age: 18, sex: "女"},
        message:{name: "小白", age: 19, sex: "男"},
        word: {name: "小刚", age: 17, sex: "男"}
      }
    }
 })

请问该如何让所有数据都显示出来

Answer 1

每一个msg组件不要自封闭，改成这样：

<msg :msgs="info"></msg>
<msg :msgs="message"></msg>
<msg :msgs="word"></msg>