Получите доступ к методу или свойству от родителя в пределах неназванного слота в компоненте vuejs

Question

Я использую Vue 2.4.1

И я пытаюсь воспроизвести то, что там показано: ссылка на alligator.io

К которой в основном осуществляется доступбезымянный слот данных.

//Chid Component
<template>
    <slot :test="myTest"></slot>
</template>

data(){
    return {
       myTest: "I should be getable"
    }
}

//Parent
<template>
    <child-component>
        <template scope="defaultSlotScope">
            {{defaultSlotScope.test}}
        </template>
    </child-component>
</template>

Итак, я впервые вижу значение scope="defaultSlotScope" Это правильный путь?Однако я не вижу, как правильно сделать эту работу.

Answer 1

Вам необходимо обернуть слот в своем дочернем компоненте, который отсутствует в родительском компоненте;

<template>
  <child-component>
    <template scope="defaultSlotScope">
       {{defaultSlotScope.test}}
    </template>
  </child-component>
</template>

Также в дочернем компоненте не следует открывать slot непосредственно вкорень шаблона.Оберните это в другой тег;Причиной этого является то, что корневой шаблон может принимать только один элемент, а слот может быть кратным:

<template>
  <div>
    <slot :test="myTest"></slot>
  </div>
</template>