Слот не заменен

Question

Мне нужно заменить «Слот по умолчанию» на новое «Мне нужно заменить это». Почему слот с именем "btn" не заменяет значение компонента по умолчанию? Как это исправить?

HTML

<div id="dropdown-sort-list">
  <dropdown-sort-list>
    <template v-slot:btn>
      I need replace this
    </template>
  </dropdown-sort-list>
</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,
            }
        },
    }]
});

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

Answer 1

Компонент dropdownMix в процессе монтирования перезаписывает все содержимое в div с идентификатором dropdown-sort-list. Вот почему это не работает.

Вот возможное решение:

<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

Похоже, ваша vue версия не может использовать v-slot, попробуйте использовать slot="btn" вместо v-slot:btn