父元素点击触发子元素弹框

实现父元素点击触发子元素弹框的步骤如下：

1. 在父元素中使用`ref`属性来引用子元素，例如：

<template>
  <div>
    <button @click="showModal">Show Modal</button>
    <my-modal ref="myModal" />
  </div>
</template>

<script>
  import MyModal from '@/components/MyModal.vue'
  export default {
    components: {
      MyModal
    },
    methods: {
      showModal() {
        this.$refs.myModal.show()
      }
    }
  }
</script>

在上面的代码中，我们在父元素中使用`ref`属性来引用子元素，并通过`import`语句引入子元素的组件。然后，在父元素的`showModal`方法中，调用子元素的`show`方法来显示弹框。

2. 在子元素组件中，定义`show`方法来显示弹框，并在模板中使用`v-show`指令来控制弹框的显示和隐藏，例如：

<template>
  <div class="modal" v-show="visible">
    <div class="modal-content">
      <h2>Modal Title</h2>
      <p>Modal Content</p>
      <button @click="hide">Close</button>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        visible: false
      }
    },
    methods: {
      show() {
        this.visible = true
      },
      hide() {
        this.visible = false
      }
    }
  }
</script>

在上面的代码中，我们在子元素组件中定义了`visible`属性，用来控制弹框的显示和隐藏。然后，我们定义了`show`方法来显示弹框，并在模板中使用`v-show`指令来控制弹框的显示和隐藏。最后，我们定义了`hide`方法来隐藏弹框。

通过以上步骤，我们就可以实现父元素点击触发子元素弹框的效果了。当父元素被点击时，会调用子元素的`show`方法来显示弹框。需要注意的是，我们在父元素中使用`$refs`属性来引用子元素时，需要在子元素的组件中定义`ref`属性来指定引用的名称，例如：`<my-modal ref="myModal" />`。