vueの親コンポーネントのスタイルをscopedに設定

親コンポーネントのループが子コンポーネントを巡回するとき、子コンポーネントは一様にborder-bottom:1pxのスタイルを持っています。この時、最後の子コンポーネントがこのスタイルを必要としないようにするには、親コンポーネントに子コンポーネントに影響を与えるスタイルを記述する必要があります。

親コンポーネント

 <div class="content mu-background-color">
 <div v-for="(item,index) in list" :key="index">
 <replyList :data="item"></replyList>
 </div>
 </div>
 
 .content {
 padding: 15px 16px;
 & :not(:last-child) {
 .reply-list {
 /deep/ .item-file {
 border-bottom: 1px solid;
 }
 }
 }
 }

サブアセンブリ

<style lang='less' scoped>
.reply-list {
margin-bottom: 8px;
.item-header {
 display: flex;
 justify-content: space-between;
 align-items: center;
}
.item-detail {
 margin-top: 15px;
 margin-left: 33px;
}
.item-file {
 margin-top: 10px;
 margin-left: 33px;
 .download {
 padding: 12px;
 display: flex;
 margin-bottom: 10px;
 align-items: center;
 .name {
 margin: 0 20px 0 5px;
 }
 }
}
}
</style>

スタイルのパススルーを達成するために**/deep/**を追加し、たとえスタイルがスコープされた親コンポーネントが子コンポーネントのスタイルも制御できるようになりました。

もし上記のどれかが間違っていたら、遠慮なく訂正してください。