如何将引用从父组件传递到模板中的子组件

Question

我正在使用此组件https://element.eleme.io/#/zh-CN/component/popover

与触发元素有关的问题（用于计算弹出窗口的位置）

对于触发元素，可以用两种不同的方式编写它：使用名为slot的slot="reference" ，或使用v-popover指令并将其设置为Popover的引用。

一切正常，默认示例。 但是我正在为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的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但这不起作用。

相关codepen https://codepen.io/anon/pen/rgRNZr

单击按钮Click me too应该显示连接到该按钮的弹出窗口。

Answer 1

问题是所需的ref是el-popover上的ref，但是您正在使用在my-popover组件上设置的ref，而不是所需的ref。

这有点奇怪，因为该组件需要引用，但从组件内部的组件中获取一个引用将很烦人。

我会将按钮和带有插槽的弹出窗口放在同一组件中。