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>