Question

我正在使用Vue 2.4.1

我正在尝试复制此处显示的内容：link to alligator.io

哪个在忙于访问未命名的插槽数据。

//Chid Component
<template>
    <slot :test="myTest"></slot>
</template>

data(){
    return {
       myTest: "I should be getable"
    }
}

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

所以这是我第一次看到scope="defaultSlotScope"的名字，这是对的吗？但是，我找不到如何正确执行此工作的方法。

Answer 1

您需要将插槽包装在父组件中缺少的子组件中；

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

同样在子组件中，您不应直接在模板根目录中公开slot。将其包装在另一个标签中；这背后的原因是，根模板只能接受一个元素，而一个插槽可以是多个：

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

在vue.js组件的非命名插槽中从父级访问方法或属性

1 个答案: