Question

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

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

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

一切正常，带有默认示例。但是我将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的{{1}}引用。即直接在模板中将ref传递给孩子。

我尝试过ref="mypopover"，但这没用。

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

单击按钮v-popover:popover.$refs.mypopover应该显示连接到该按钮的弹出窗口。

Answer 1

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

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

我会将按钮和弹出式窗口放在同一个组件中。

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

1 个答案: