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组件会覆盖ID为dropdown-sort-list的div中的所有内容。这就是为什么它不起作用。

这是一个可能的解决方案：

<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

插槽未更换

2 个答案: