我正在尝试构建一个实现以下功能的 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>
但是绑定(bind)不起作用,text
始终包含 false
.
最佳答案
您可以使用 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 标签或组件。
关于javascript - vue.js 和属性中的槽,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58406374/