//购物车头组件 var CartHead = { props: ['welcome','login','register','navList'], template: <div class="shortcut"> <div class="w" > <div class="fl"> <ul> <li>{{welcome}}</li> <li> <a href="#">{{login}}</a> <a href="#" class="style-red">{{register}}</a> </li> </ul> </div> <div class="fr" > <ul> <li v-for="(item, index) in navList" :key="index"> <a :href="item.href">{{ item.text }}</a> <i v-if="item.icon" class="icomoon">{{ item.icon }}</i> </ul> </div> </div> </div> ,和data:function () { return{ cartname: '购物车', welcome: '购物商城欢迎您！', login: '请登录', register: '免费注册', navList: [ { text: '我的订单', href: '#' }, { text: '我的购物', href: '#', icon: '' }, { text: '商城会员', href: '#' }, { text: '企业采购', href: '#' }, { text: '关注商城', href: '#', icon: '' }, { text: '客户服务', href: '#', icon: '' }, { text: '网站导航', href: '#', icon: '' } ] } },父传子，循环后没有渲染成功请修改，把<li class="spacer"></li>也写进去让每个数据字段有|隔开

你可以尝试将模板代码中的 `<li class="spacer"></li>` 修改为 `<li class="spacer" v-if="index !== navList.length - 1">|</li>`，这样就能够让每个数据字段有竖线隔开了。

修改后的代码如下：

var CartHead = {
  props: ['welcome', 'login', 'register', 'navList'],
  template: `
    <div class="shortcut">
      <div class="w">
        <div class="fl">
          <ul>
            <li>{{welcome}}</li>
            <li>
              <a href="#">{{login}}</a>
              <a href="#" class="style-red">{{register}}</a>
            </li>
          </ul>
        </div>
        <div class="fr">
          <ul>
            <li v-for="(item, index) in navList" :key="index">
              <a :href="item.href">{{ item.text }}</a>
              <i v-if="item.icon" class="icomoon">{{ item.icon }}</i>
              <li class="spacer" v-if="index !== navList.length - 1">|</li>
            </li>
          </ul>
        </div>
      </div>
    </div>
  `,
  data: function () {
    return {
      cartname: '购物车',
      welcome: '购物商城欢迎您！',
      login: '请登录',
      register: '免费注册',
      navList: [
        { text: '我的订单', href: '#' },
        { text: '我的购物', href: '#', icon: '' },
        { text: '商城会员', href: '#' },
        { text: '企业采购', href: '#' },
        { text: '关注商城', href: '#', icon: '' },
        { text: '客户服务', href: '#', icon: '' },
        { text: '网站导航', href: '#', icon: '' }
      ]
    }
  }
};