如何在 vuejs 2.5.x 中正确使用插槽范围？

Question

我正在尝试在我们的 Vue 应用程序中使用 slot-scope 功能（旧语法 v2.5.x）：https://vuejs.org/v2/guide/components-slots.html#Scoped-Slots-with-the-slot-scope-Attribute，但它不起作用。

这是我的子组件：

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

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

我尝试从 主要组件 中使用如下：

<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>

这里是代码沙盒示例的链接：https://codesandbox.io/s/vue-template-lg8r3

我做错了什么？谢谢！

Answer 1

您混淆了普通插槽和作用域插槽。

假设您需要作用域插槽，则需要更改：

<slot></slot>

到这里：

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

它们不会自动通过。