Question

在Blade中为父组件指定如下：

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

我能以某种方式对其进行优化吗？

Answer 1

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

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

然后在组件

中创建一个计算属性

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

如何优化从刀片到Vue组件的子节点的参数绑定？

1 个答案: