[Vuejs]-Access method or property from parent within a non named slot in vuejs component

by

0👍

You need to wrap the slot in your child component which is missing in the parent;

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

Also in the child component, you should not expose slot directly in the template root. Wrap it in another tag; The reason behind this is that the root template can accept only one element while a slot can be multiple:

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

Leave a comment