How to use slot scope correctly within vuejs 2.5.x?

0
votes

I'm trying to utilize a slot-scope functionality within our Vue application (old syntax v2.5.x): https://vuejs.org/v2/guide/components-slots.html#Scoped-Slots-with-the-slot-scope-Attribute and it just doesn't work.

This is my child component:

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: "ChildComponent",
  props: {
    msg: String
  },
  data() {
    return {
      foo: "bar"
    };
  }
};
</script>

Which I try to use from the main component as follows:

<template>
  <div id="app">
    <ChildComponent msg="Hello Vue in CodeSandbox!">
      <ul slot-scope="props">
        <li>foo: {{props.foo}}</li>
        <li>msg: {{props.msg}}</li>
      </ul>
    </ChildComponent>
  </div>
</template>

<script>
import ChildComponent from "./components/ChildComponent";

export default {
  name: "App",
  components: {
    ChildComponent
  }
};
</script>

Here is a link to codesandbox's example: https://codesandbox.io/s/vue-template-lg8r3

What am I doing wrong? Thank you!

1
vue.jsvuejs2

1 Answers

1
votes

You're mixing up normal slots and scoped slots.

Assuming you want scoped slots you would need to change this:

<slot></slot>

to this:

<slot :foo="foo" :msg="msg"></slot>

They won't be passed automatically.