子组件中的访问槽值答案

【问题标题】：Access Slot Value in child component子组件中的访问槽值
【发布时间】：2019-11-11 11:16:04
【问题描述】：

我将 treeselect 组件作为插槽传递，如下所示。

<template v-slot:filters>
  <treeselect v-model="value" :options="filterTreeData" />
</template>

我的位置如下。

<div class="rule-filter-container">
      <slot name="filters"></slot>
</div>
<div class="rule-operator-container">
  <el-select
    v-if="treeSelect.selectedValue.dataType !== dataType.Checkbox && treeSelect.selectedValue.dataType !== dataType.Radio"
    v-model="value"
    filterable
    placeholder="Type Or Select">
  </el-select>
</div>

如上所述，我写了 v-if 条件作为示例。

它现在不工作。但我想访问 treeSelect 的选定值。并基于此我想保留或删除“el-select”组件。

那么如何访问子组件中作为插槽传递的 treeselect 的选定值？

【问题讨论】：

插槽可用于从子组件公开某些内容，在您的代码中，您似乎没有为插槽提供任何内容。目前还不清楚哪个是父母，哪个是孩子。通常，您会使用scoped-slot 语法向孩子公开某些内容。在这里查看文档：vuejs.org/v2/guide/components-slots.html 这里有一个很好的例子：css-tricks.com/…

标签： html vue.js vuejs2 vue-component

【解决方案1】：

您应该能够将插槽的值绑定到组件。

<template v-slot:filters :slotValue="value">
  <treeselect v-model="value" :options="filterTreeData" />
</template>

并且在组件中：

<div class="rule-filter-container">
      <slot name="filters"></slot>
</div>
<div class="rule-operator-container">
  <el-select
    v-if="slotValue !== dataType.Checkbox && slotValue !== dataType.Radio"
    v-model="value"
    filterable
    placeholder="Type Or Select">
  </el-select>
</div>

【讨论】：

这是一个很好的解决方法，但是 vue 应该有一些方法可以让我们通过 slot 访问。