在 Vue 的组件脚本中使用 slot-scoped 数据

Question

在 vue 中，我有一个带有插槽的组件 A，它使用它返回一个对象作为组件 B 中的插槽范围：

组件A模板：

<template>
<div>
   <slot :myObject="myObject" />
</div>
</template>

B 组件模板：

<template>
<component-a>
  <template slot-scope="{myObject}">
    <!-- uses myObject -->
  </template>
</component-a>
</template>

<script>
  module.exports={
     data(){
       return {
          myObject: null // This never updates with the new value
       }
     }
  }
 </script>

在组件 B 的 html 模板中一切正常，但是，我无法在组件 B 的脚本中访问 myObject。我可以创建一个接受 myObject 作为道具并拥有所有需要的子组件 (C)那里有逻辑，但我想避免这种情况。

Answer 1

如果您使用 slot-scope，您基本上是将数据从托管插槽的组件传递到插槽（而不是插槽的内容）。 在您的情况下，如果要使用数据槽范围，则必须从组件 A 传递数据。因此数据源 myObject 必须存在于组件 A 中。

所以正确的方法应该是这样的：

组件 A

<template>
    <div>
        <slot :myObject="myObject" />
        <button @click="changeMyObject">Change MyObject</button>
    </div>
</template>
<script>
    export default {
        name: "slot-scope-component",
        data(){
            return {
                myObject: {
                    value: "ABC"
                }
            }
        },
        methods:{
            changeMyObject() {
                this.myObject = {
                    value: "XYZ"
                };
            }
        }
    }
</script>

组件 B

<template>
    <ComponentA>
        <template slot-scope="props">
            {{props.myObject}}
        </template>
    </ComponentA>
</template>

<script>
    import ComponentA from '@/components/ComponentA';

    export default {
        components: {
            ComponentA
        },
    }
</script>

还有一点拼写错误：你写的是 slot-scoped 而不是 slot-scope

您可以使用解构进一步改进该代码：

slot-scope="{myObject}"