如何优化从刀片到 Vue 组件子级的参数绑定？答案

【问题标题】：How to optimize parameters binding from blade to Vue component's children?如何优化从刀片到 Vue 组件子级的参数绑定？
【发布时间】：2018-01-17 05:10:19
【问题描述】：

在刀片中有一个用于父组件的指令，如下所示：

<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”正如你所见，它必须是直通刀片父组件，然后是子组件......但实际上我不需要它在父组件中。

我可以优化一下吗？

【问题讨论】：

标签： php laravel vue.js components blade

【解决方案1】：

您可以在刀片中创建一个 javascript 变量：

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

然后在组件中创建一个计算属性

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

【讨论】：

那我认为你必须通过父组件传递它