次のコードに示すように、要素をクリックしてポップアップ ボックスを表示し、ポップアップ ボックスの外側の領域をクリックしてポップアップ ボックスを閉じる必要があります。
しかし、これには問題があります。つまり、ポップアップ ボックスが表示されているときに、ポップアップ ボックスの領域をクリックすると、親要素のクリック イベントもトリガーされてしまいます。ifshow=false
<view @click="ifshow=false">
<view @click="ifshow=true">
点击显示弹出框
</view>
<view v-if="ifshow">
弹出框
</view>
</view>
解決策: サブコンポーネントのイベントに変更を追加するstop
と、親イベントと子イベントが互いに分離されます。
<view @click="ifshow=false">
<view @click.stop="ifshow=true">
点击显示弹出框
</view>
<view v-if="ifshow">
弹出框
</view>
</view>