Slot not replaced

Question

I need replace "Default Slot" on new " I need replace this". Why slot with name "btn" dont replace default component value? How fix it?

HTML

<div id="dropdown-sort-list">
  <dropdown-sort-list>
    <template v-slot:btn>
      I need replace this
    </template>
  </dropdown-sort-list>
</div>

Component

let dropdown = Vue.component('dropdown-sort-list', {
        props: {

        },
        data: function () {
            return {
            }
        },
        template: `
                <div class="dropdown">

                    <slot name="btn">
                       Default Slot
                    </slot>

                </div>
              `
    });

Script

var dropdownMix = dropdown.extend({
    mixins: [{
        data: function () {
            return {
                itemList: itemListData,
            }
        },
    }]
});

var dropdownEx = new dropdownMix({
    el: "#dropdown-sort-list",
});

Answer 1

The dropdownMix component, during the mount process, overwrites all the content within the div with id dropdown-sort-list. That's why it doesn't work.

Here's a possible solution:

<div id="mydiv">
    <dropdown-sort-list-mix>
        <template slot="btn">
            I need replace this
        </template>
    </dropdown-sort-list-mix>
</div>

let dropdown = Vue.component('dropdown-sort-list', {
        props: {

        },
        data: function () {
            return {
            }
        },
        template: `
                <div class="dropdown">

                    <slot name="btn">
                       Default Slot
                    </slot>

                </div>
              `
    });

var dropdownMix = dropdown.extend({
    mixins: [{
        data: function () {
            return {
                itemList: itemListData,
            }
        },
    }]
});

Vue.component('dropdown-sort-list-mix',dropdownMix)

new Vue({
    el: '#mydiv'
})

Answer 2

Look like your vue version cant use v-slot , try to use slot="btn" instead of v-slot:btn