javascript - 如何在模板中将 ref 从父组件传递到子组件

Question

我正在使用这个组件 https://element.eleme.io/#/en-US/component/popover

与触发元素相关的问题(用于计算popover位于何处)

For the triggering element, you can write it in two different ways: use the slot="reference" named slot, or use the v-popover directive and set it to Popover's ref.

默认示例一切正常。但我正在使用 transparent wrapper对于像这样的 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" 的引用。 IE。直接在模板中将 ref 传递给 child。

我试过 v-popover:popover.$refs.mypopover 但它不起作用。

相关代码笔https://codepen.io/anon/pen/rgRNZr

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

Answer 1

问题是您想要的 ref 是 el-popover 上的那个，但您使用的是在 my-popover 组件上设置的 ref 而不是您想要的 ref。

这是一件奇怪的事情，因为该组件需要一个 ref，但是从组件内部的组件获取一个 ref 会很烦人。

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