vue.js 和属性中的插槽

Question

我正在尝试构建一个实现以下功能的 vue.js 模板：

• <MyComponent></MyComponent>生成<div class="a"></div>
• <MyComponent>b</MyComponent>生成<div class="a" data-text="b"></div> 。

这样的事情可能吗？

编辑

这是我能达到的最好的：

  props: {
    text: {
      type: [Boolean, String],
      default: false
    }
  },

和模板

<template>
  <div :class="classes()" :data-text="text">
    <slot v-bind:text="text"></slot>
  </div>
</template>

但绑定不起作用， text始终包含false 。

Answer 1

您在这里混合插槽和属性。 您必须将任何您想要最终作为data-text作为道具传递给您的组件。

<MyComponent text="'b'"></MyComponent>

在您的模板中，您可以删除插槽

<template>
    <div :class="classes()" :data-text="text"></div>
</template>

另一件事：看起来你通过一个方法绑定你的类。 这可以通过计算属性来完成，如果您不熟悉，请查看。

Answer 2

您可以使用mounted()方法获取文本，使用组件的$slot.default属性来获取封闭文本。 在数据中创建一个文本字段并在mounted()方法中更新，如下所示：

Vue.component('mycomponent', {
  data: () => ({
    text: ""
  }),
  template: '<div class="a" :data-text=text></div>',
  mounted(){
    let slot = this.$slots.default[0];
    this.text=slot.text;

  }
});

注意：它仅适用于文本，不适用于 Html 标签或组件。

Answer 3

你可以试试这个。

<template>
  <div :class="classes()">
    <slot name="body" v-bind:text="text" v-if="hasDefaultSlot">
    </slot>
  </div>
</template>


computed: {
    hasDefaultSlot() {
        console.log(this)
        return this.$scopedSlots.hasOwnProperty("body");
    },
}


Calling

<MyComponent>
<template v-slot:body="props">
b
</template>
</MyComponent>