[英]How to pass ref from parent to child component in template
I am using this component https://element.eleme.io/#/en-US/component/popover 我正在使用此组件https://element.eleme.io/#/zh-CN/component/popover
Issue related to triggering element (it is used to calculate where is popover located) 与触发元素有关的问题(用于计算弹出窗口的位置)
For the triggering element, you can write it in two different ways: use the
slot="reference"
named slot, or use thev-popover
directive and set it to Popover's ref. 对于触发元素,可以用两种不同的方式编写它:使用名为slot的slot="reference"
,或使用v-popover
指令并将其设置为Popover的引用。
Everything ok with default examples. 一切正常,默认示例。 But I am using transparent wrapper for el-popover
component like so. 但是我正在为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>
It works ok with slot="reference"
named slot. 使用名为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>
But due to complex layout I need to use v-popover
directive. 但是由于布局复杂,我需要使用v-popover
指令。 Got no luck with wrapped component. 包装好的组件没有运气。
<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>
So I need somehow to pass in v-popover
reference to ref="mypopover"
from wrapped component. 因此,我需要以某种方式将v-popover
参考传递给包装组件中的ref="mypopover"
。 Ie pass ref to child directly in template. 即在模板中直接将ref传递给子级。
I've tried v-popover:popover.$refs.mypopover
but that doesn't work. 我已经尝试过v-popover:popover.$refs.mypopover
但这不起作用。
Related codepen https://codepen.io/anon/pen/rgRNZr 相关codepen https://codepen.io/anon/pen/rgRNZr
Click on button Click me too
should show popup connected to that button. 单击按钮Click me too
应该显示连接到该按钮的弹出窗口。
The problem is that the ref you want is the one that is on the el-popover but you are using the ref that is set on the my-popover component instead of the one you want. 问题是所需的ref是el-popover上的ref,但是您正在使用在my-popover组件上设置的ref,而不是所需的ref。
This is kind of a wierd thing since that component wants a ref but it will be annoying to get one from the component inside your component. 这有点奇怪,因为该组件需要引用,但从组件内部的组件中获取一个引用将很烦人。
I would put the button and popup with a slot in the same component. 我会将按钮和带有插槽的弹出窗口放在同一组件中。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.