我正在尝试构建实现以下功能的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]。
您正在混合插槽和属性。您必须将想要最终得到的任何内容作为false
属性传递给组件。
data-text
并且您可以在模板中删除插槽
<MyComponent text="'b'"></MyComponent>
[另一件事:看起来就像您通过一种方法来绑定您的类。这可以通过计算属性来完成,如果您不熟悉,请看一下。
您可以尝试这个。
<template>
<div :class="classes()" :data-text="text"></div>
</template>
您可以使用<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标签或组件。