Vue2+vue-router传递数据给子组件

现在有三个组件:app.vue,goods.vue,shopcart.vue.他们的关系是:app.vue组件是goods.vue的父组件,goods.vue是shopcart.vue的父组件。
他们的代码片段如下:

/*app.vue代码片段*/
<template>
  <div>
    <div class="tab">
      <div class="tab-item">
        <router-link to="/goods">商品</router-link>
      </div>
      <div class="tab-item">
        <router-link to="/ratings">评价</router-link>
      </div>
      <div class="tab-item">
        <router-link to="/seller">商家</router-link>
      </div>
    </div>
    <router-view :seller="seller"></router-view>
  </div>
</template>

<script type="text/ecmascript-6">
  export default {
    data: function () {
      return {
        seller: {}/*一些数据*/
      };
    }
    ......
   };
</script>
/*goods.vue代码片段*/
<template>
  <div class="goods">
   
    <shopcart :delivery-price="seller.deliveryPrice" :min-price="seller.minPrice"></shopcart>
  </div>
</template>

<script type="text/ecmascript-6">
import shopcart from '../shopcart/shopcart.vue';

  export default {
    props: {
      seller: {
        type: Object
      },
      deliveryPrice: {
        type: Number,
        default: 0
      },
      minPrice: {
        type: Number,
        default: 0
      }
    }
    //coding……
  }
/*shopcart.vue代码片段*/
<template>
  <div class="shopcart">
    <div class="content">
      <div class="content-left">
        <div class="logo-wrapper">
          <div class="logo">
            <i class="icon-shopping_cart"></i>
          </div>
        </div>
        <div class="price">$0元</div>
        <div class="desc">另需配送费${{deliveryPrice}}元</div>
      </div>
      <div class="content-right"></div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  export default {
    props: {
      diliveryPrice: {
        type: Number,
        default: 0
      }
    }
  };
</script>

我想在app.vue组件中通过<router-view :seller="seller"></router-view>把seller传递给goods.vue,然后再在goods.vue通过 <shopcart :delivery-price="seller.deliveryPrice" :min-price="seller.minPrice"></shopcart>把seller.deliveryPrice传递给shopcart.vue
但是浏览器给出了这样的报错:报错信息

<router-view :seller="seller"></router-view>vue-router通过设置props的方式传递数据给子组件的方式是错的吗?还是我其他地方写错了?

阅读 3.5k
1 个回答

<router-view></router-view>是匹配路由之后,加载对应组件,那个组件在去控制获取数据什么的,数据传输不是在这一级做的。

推荐问题