如何優化從刀片到Vue組件的孩子的參數綁定？

Question

具有刀片指令像這樣的父組件：

<component v-bind:mydata="data" v-bind:basepathimg="{{config('base_path_images')}}" ></component> 

這反過來負荷多次了孩子們喜歡的：

<div v-for="(c, index) in mydata"> 
<childcomponent v-bind:c="item" v-bind:basepathimg="basepathimg" ></childcomponent> 
</div> 

.... 

<script> 
export default{ 
    props: ['mydata', 'basepathimg', ....], 
.... 

然後終於在子組件

<img :src="basepathimg" class="img-responsive"> 


<script> 
export default{ 
    props: ['item', 'basepathimg', ....], 
.... 

這裏關注的是「basepathimg」正如你所看到的，它必須是通過刀片父組件ant然後子組件...但實際上我並不需要它父組件。

我可以通過某種方式進行優化嗎？

Answer 1

你可以在刀片創建一個JavaScript變量：

<script> 
window.Paths = { 
    img: "{{ config('base_path_images') }}" 
}; 
</script> 

然後在組件

export default { 
    computed: { 
     basepathimg() { 
      return window.Paths.img; 
     } 
    } 
}