Question

我是一个尝试实现以下目标的新手：

我使用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>

单文件组件（lw halfMultiselectSlotOption.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>

它加载组件，但道具不存在，浏览器控制台说，＆＃34;道具＆＃34;未定义

有人知道怎么做吗？

Answer 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>

好吧..一个问题：

＆＃34;删除＆＃34;方法不存在，因为范围......正在寻找一种方法让它运作......

编辑：

好的，这个对我有用：

<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);
        }

似乎现在一切正常;）

vuejs slot作为单个文件组件

1 个答案: