插槽未更换答案

【问题标题】：Slot not replaced插槽未更换
【发布时间】：2020-03-04 09:49:30
【问题描述】：

我需要在新的“我需要替换这个”上替换“默认插槽”。为什么名称为“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",
});

【问题讨论】：

dropdownMix组件，在挂载过程中，会覆盖id为dropdown-sort-list的div中的所有内容，所以不起作用
这里是一个带有可能解决方案的 jsfiddle。如果这是您想要的，我会将其添加为答案jsfiddle.net/7fj2skwt
感谢 fabruex。它有效，现在我明白了。
很高兴它对您有所帮助，我将其添加为答案

标签： vue.js vuejs2 vue-component

【解决方案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'
})

【讨论】：

【解决方案2】：

看来你的 vue 版本不能使用 v-slot ，尝试使用 slot="btn" 而不是 v-slot:btn

【讨论】：