vuejs 插槽作为单个文件组件答案

【问题标题】：vuejs slot as single file componentvuejs 插槽作为单个文件组件
【发布时间】：2018-08-25 21:22:24
【问题描述】：

我是一个 vue 新手，正在努力实现以下目标：

我正在使用 vue-multiselect (https://vue-multiselect.js.org/)，它支持插槽，所以我可以自定义选项和标签

这很好用，是一个非常好的功能，但现在我的项目中有多个多选，选项和标签的模板应该是相同的。所以我想我可以制作一个组件并使用它，但它不起作用（当然我尝试过，但根本没有使用插槽的经验）

这是一个没有组件的工作版本：

<vuemultiselect v-model="filter" [...]>
    <template slot="noResult">
        <p v-lang.labels.keineergebnissegefunden></p>
    </template>  
    <template slot="option" slot-scope="props">
        <img v-if="props.option.typ=='person'" src="img/Person.png">
        <img v-else-if="props.option.typ=='article'" src="img/article.png">
        {{props.option.label}}
    </template>
</vuemultiselect>

我的分离方法：

<vuemultiselect v-model="filter" [...]>
    <template slot="noResult">
        <p v-lang.labels.keineergebnissegefunden></p>
    </template>  
    <lw-suche-multiselect-slot-option slot="option" slot-scope="props"></lw-suche-multiselect-slot-option>
</vuemultiselect>

单文件组件（lwSucheMultiselectSlotOption.vue）看起来像：

<template>
    <div name="option">
        <img v-if="props.option.typ=='person'" src="img/Person.png">
        <img v-else-if="props.option.typ=='article'" src="img/article.png">
        {{props.option.label}}
    </div>
</template>
<script>
    module.exports = {
        created:function()
        {
            console.log(this);
        }
    }
</script>

它加载了组件，但是 props 不存在，浏览器控制台说，“props”是未定义的

有人知道怎么做吗？

【问题讨论】：

标签： vuejs2 vue-component

【解决方案1】：

找到了解决办法！

<lw-suche-multiselect-slot-option slot="option" slot-scope="props" :option="props.option"></lw-suche-multiselect-slot-option>

组件：

<template>
    <div>
    [...]
    </div>
</template>
<script>
module.exports = {
    props: ['option'],
    data:function() 
    { 
        return {};
    }
}
</script>

好的..一个问题：

由于范围的原因，“删除”方法不存在......正在寻找一种让它工作的方法......

编辑：

好的，这个对我有用：

<img src="../../img/appbar.delete.png" class="multiselect__tag-icon" @click="remove" style="top:auto;bottom:auto;height:20px; vertical-align:middle">


remove:function()
        {
            this.$parent.removeElement(this.option);
        }

现在似乎一切正常；）

【讨论】：