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始终包含[​​C0]。

Answer 1

您正在混合插槽和属性。您必须将想要最终得到的任何内容作为false属性传递给组件。

data-text

并且您可以在模板中删除插槽

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

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

Answer 2

您可以尝试这个。

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

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>

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

mounted()

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