Как передать ref из родительского в дочерний компонент в шаблоне - PullRequest
Новая
       35

Как передать ref из родительского в дочерний компонент в шаблоне

2 голосов
/ 04 июня 2019

Я использую этот компонент https://element.eleme.io/#/en-US/component/popover

Проблема, связанная с триггерным элементом (используется для расчета местоположения поповера)

Для запускающего элемента вы можете записать его двумя разными способами: использовать именованный слот slot="reference" или директиву v-popover и установить для него ссылку Popover *. 1009 *

Все нормально с примерами по умолчанию. Но я использую прозрачную оболочку для el-popover компонента, как это. 

<script id="my-popover" type="x-template">
<el-popover
  ref="mypopover"
  transition="el-zoom-in-top"
  v-bind="$attrs"
  v-on="$listeners"
>
  <!-- Pass on all named slots -->
  <slot
    v-for="slot in Object.keys($slots)"
    :slot="slot"
    :name="slot"
  />
  <span> My popover </span>
</el-popover>
</script>

Работает нормально с slot="reference" именованным слотом. 

<my-popover 
    placement="bottom"
    title="Title"
    width="200"
    trigger="manual"
    v-model="visible"
>
    <el-button
        slot="reference" 
        @click="visible = !visible"
    >
        Click me
    </el-button>
</my-popover>

Но из-за сложной компоновки мне нужно использовать директиву v-popover. Не повезло с упакованным компонентом. 

<my-popover
    ref="popover"
    placement="right"
    title="Title2"
    width="200"
    trigger="manual"
    v-model="visible2"
>
</my-popover>
<el-button 
    v-popover:popover
    @click="visible2 = !visible2"
>
    Click me too
</el-button>

Так что мне нужно как-то передать v-popover ссылку на ref="mypopover" из обернутого компонента. То есть передать ref непосредственно ребенку в шаблоне.

Я пробовал v-popover:popover.$refs.mypopover, но это не работает.

Связанный кодовый блок https://codepen.io/anon/pen/rgRNZr

Нажмите на кнопку Click me too должно отобразить всплывающее окно, связанное с этой кнопкой.

1 Ответ

0 голосов
/ 04 июня 2019

Проблема в том, что вы хотите использовать ссылку на el-popover, но вы используете ссылку, установленную в компоненте my-popover, вместо той, которую вы хотите.

Это довольно странная вещь, так как этот компонент хочет получить ссылку, но будет неприятно получить ее от компонента внутри вашего компонента.

Я бы поставил кнопку и всплывающее окно со слотом в одном компоненте.

...