javascript - vue2 的 slot 如何传参给 子组件

Question

vue2 的 slot 如何传参给 子组件？

场景:
想当 App.vue组件 调用 Input.vue组件时, 如何通过判断 Input.vue 组件是否被 Group.vue组件 所包围时, 是否给 <input /> 标签添加一个 p(含有 '.control')标签。

问:

我如何在 Group.vue 组件的 slot 传递 is-group 属性给子组件(Input.vue)?

伪代码:

最外层组件 App.vue

<template>
    <l-input value='用户名' />
</template>

父组件 LGroup.vue:

<templale>
    <p class="control">
        <slot :is-group="isGroup"></slot>
    </p>
</template>
<script>
    export default {
        data () {
            isGroup: true
        }
    }
</script>

子组件 LInput.vue

<template>
    <template v-if="!isGroup" >
        <p class="control">
           <input type='text' :value='value' />
        </p>
    </template>
    <template>
        <input type='text' :value='value' />
    </template>
</template>

<script>
    export default {
        props: {
            value: {
                type: ''
            }
        },
        computed: {
        }
    }
</script>

Answer 1

很幸運的， Vue 2 不久前推出了大家一直很想要的功能

所以可以透過這種方式傳遞：

父組件

<l-group>
    <template scope="props">
        <l-input :is-group="props.isGroup"></l-input>
    </template>
</l-group>

<l-input></l-input>

Group組件

<p class="group">
    <slot :is-group="true"></slot>
</p>

Input 子組件

Vue.component('l-input', {
    // ...略
    props: {
        isGroup: {
            type: Boolean,
            default: false
        }
    }
})

很輕鬆的達成目的。

實現 : jsFiddle

---

但是

如果連 props 傳遞都不想用的話，可以直接由子組件根據 $parent 取得其父組件，再判斷其組件名稱是否為 l-group 來判定當前 input 組件是否被包住了。

Input 組件

data() {
    return {
        isGroup: false
    }
},
created() {
    this.isGroup = this.$parent.$options._componentTag === 'l-group'
}

實現 : jsFiddle