vue.js 和属性中的插槽

Question

I'm trying to build a vue.js template that implements following:

• <MyComponent></MyComponent> generates <div class="a"></div>
• <MyComponent>b</MyComponent> generates <div class="a" data-text="b"></div> .

Is such a thing possible?

EDIT

Here is the best I can reach:

  props: {
    text: {
      type: [Boolean, String],
      default: false
    }
  },

and template

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

but the binding does not work, text always contains false .

Answer 1

You're mixing slots and properties here. You'll have to pass whatever you want to end up as your data-text attribute as a prop to your component.

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

And in your template you can remove the slot

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

Another thing: it looks like your binding your classes via a method. This could be done via computed properties, take a look if you're not familiar.

Answer 2

You can use the mounted() method to get text using $slot.default property of the component to get the enclosing text. Create a text field in data and update inside mounted() method like this:

Vue.component('mycomponent', {
  data: () => ({
    text: ""
  }),
  template: '<div class="a" :data-text=text></div>',
  mounted(){
    let slot = this.$slots.default[0];
    this.text=slot.text;

  }
});

Note: It will only work for text, not for Html tags or components.

Answer 3

You can try this.

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