CODEWITHSUNDEEP
htmlvue.jsvuejs2vue-component
Anonymous Creator
Anonymous Creator

Reputation: 3819

Access Slot Value in child component

I am passing treeselect component as a slot as below.

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

My slot are placed as below.

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

As in above I have written v-if condition for the sake of example.

It is not working as of now. But I want to access treeSelect's selected value. and based on that I want to keep or remove "el-select" component.

So how do I access that selected value of treeselect in child component which is passed as a slot?

Upvotes: 0

Views: 561

Answers (1)

Cathy Ha
Cathy Ha

Reputation: 1677

You should be able to bind the slot's value to the component.

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

And in the component: 

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

Upvotes: 1

Related Questions