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

Posted 2023-02-23

【中文标题】如何在 vuejs 2.5.x 中正确使用插槽范围？

【英文标题】：How to use slot scope correctly within vuejs 2.5.x?

【发布时间】：2020-01-08 10:08:39

【问题描述】：

我正在尝试在我们的 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

我做错了什么？谢谢！

【参考方案1】：

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

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

<slot></slot>

到这里：

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

它们不会自动通过。

【讨论】：

好的，它有效。但是我在官方教程中没有看到这个，我错过了吗？请指出写在哪里？

@Anatoly 在vuejs.org/v2/guide/components-slots.html#Scoped-Slots 中进行了介绍。请注意，<slot> 在子代中的行为在 2.5 和 2.6 之间没有改变，只是父代的属性发生了变化。

谢谢@skirtle，我现在看到了。他们在同一手册中混合了新旧版本的功能，这让我很困惑。非常感谢！