如何将点击事件传递给另一个按钮并触发弹出窗口

Question

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

我需要将点击事件正确地从一个按钮传递到另一个按钮，并在转发的按钮下显示弹出窗口

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.8.2/lib/index.js"></script>
<div id="app">
<template>
   <el-button @click="$refs.forward.click()">Click to forward</el-button>
  <el-popover
    placement="bottom"
    title="Title"
    width="200"
    trigger="click"
    content="this is content, this is content, this is content">
    <el-button ref="forward" slot="reference">Click to activate</el-button>
  </el-popover>

</template>
</div>

我已经通过$refs.forward.click()传递了click事件，但这不会触发弹出窗口。我想念什么吗？

https://codepen.io/anon/pen/dEdENJ

Answer 1

您在这里已经考虑过了

向data添加一个名为visible的新属性

visible: false

然后在click to forward上进行修改

@click="visible = !visible"

最后，将其分配给弹出式窗口的v-model：

v-model="visible"

完成。