现在有三个组件: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的方式传递数据给子组件的方式是错的吗?还是我其他地方写错了?
<router-view></router-view>是匹配路由之后,加载对应组件,那个组件在去控制获取数据什么的,数据传输不是在这一级做的。