javascript - 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>

但是绑定(bind)不起作用，text始终包含 false .

Answer 1

您可以使用 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 标签或组件。