父组件( empty-cmp )：

HTML:

 <div   v-if="orderList.length">  </div>
  <empty-cmp v-else>   </empty-cmp>

子组件( empty-cmp )：

HTML:

<template>

  <div class="empty" v-if="!hide" @click="$emit('click', $event)">

    <img src="../static/null-logo.png" alt="" />

    <div class="message">

      <p>暂无数据</p>

    </div>

  </div>

</template>

JS：

export default {

  props: {

    hide: {

      type: Boolean,

      default: false, }, },};

css：

<style lang="scss" scoped>

.empty {

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  margin-top: 40%;

  > img {

    width: 150px;

    height: 150px;

  }

  .message {

    width: 100%;

    text-align: center;

    color: #ddd;

    margin-top: 14px;

    font-size: 16px;

    > p {

      text-align: center;

    }

  }

}

</style>