vue 点击子盒子触发父盒子点击事件

在Vue中，要实现点击子组件触发父组件的点击事件，可以通过在子组件中使用`$emit`方法来触发一个自定义事件，然后在父组件中监听该事件并执行相应的方法。

在给子组件绑定ref属性后，可以在父组件中通过`this.$refs.child`来获取子组件的实例。然后，在子组件的点击事件中使用`$emit`方法触发一个自定义事件，例如`this.$emit('childClick')`。

在父组件中，可以在子组件的标签上监听该自定义事件，例如`@childClick="parentClick"`，然后在父组件的methods中定义`parentClick`方法来处理点击事件。

这样，当子组件被点击时，会触发自定义事件，然后父组件监听到该事件并执行相应的方法。

范例中的代码可以做如下修改：

父组件：

<view class="panel-list-item" @click="openPopup">
  <text>联系客服</text>
  <uni-icons type="arrowright" size="15"></uni-icons>
</view>
<my-qrcode ref="child" @childClick="parentClick"></my-qrcode>

openPopup() {
  this.$refs.child.Popup();
},
parentClick() {
  console.log("子组件触发了父组件的点击事件！");
}

子组件：

<template>
  <view class="qr-container" @click="childClick">
    <uni-popup ref="popup" type="center">
      <view class="pop-box">
        <view class="pop-box-inner">
          <p>扫码关注</p>
          <image :src="qrSrc" mode='widthFix'/>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

methods: {
  childClick() {
    this.$emit('childClick');
  },
  Popup() {
    console.log("父组件触发了子组件的方法！");
    this.$refs.popup.open('top');
  }
}

这样，当子组件被点击时，会触发`childClick`方法，然后通过`$emit`方法触发`childClick`事件，父组件监听到该事件并执行`parentClick`方法。
#### 引用[.reference_title]
- *1* [vue父组件触发子组件事件](https://blog.csdn.net/SingDanceRapBall/article/details/127477529)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^koosearch_v1,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]