vue -- 引入外部组件弹框

这里是需要引入组件的页面，即右上角的popover弹框所在页面

<template>
    <div class="right-menu">
      <el-popover
        class="avatar-container right-menu-item hover-effect"
        trigger="click"
        placement="bottom"
        width="300"
        popper-class="navbar-pop"
      >
        <div class="pop-user">
          <!-- 头像 -->
          <el-avatar class="pop-avatar" icon="el-icon-user-solid" style="vertical-align: middle;" />
        </div>
        <div class="pop-menu">
          <ul>
            <li @click="handlePerson">个人信息</li>
            <li @click="handleHelp">帮助</li>
            <li style="margin-right:0" @click="handleSet">关于</li>
          </ul>
        </div>
      </el-popover>
    </div>
    
    <!-- 组件使用 -->
    <about v-if="aboutVisible" @close="handleClose" />
    <person-info v-if="personInfo" @close="handleClosePerson" />
    <help v-if="helpDialog" @close="handleCloseHelp" />
    
</template>

<script>
// 引入外部组件
import About from '../About'
import personInfo from '../PersonInfo'
import Help from '../Help'

export default {
  components: {
    About,
    personInfo,
    Help
  },
  data() {
    return {
      // 弹框初始状态设为关闭
      aboutVisible: false,
      personInfo: false,
      helpDialog: false
    }
  },

  methods: 
    // 打开引入外部组件弹框
    handleSet() {
      this.aboutVisible = true
    },
    handlePerson() {
      this.personInfo = true
    },
    handleHelp() {
      this.helpDialog = true
    },
    // 关闭弹框
    handleClose() {
      this.aboutVisible = false
    },
    handleClosePerson() {
      this.personInfo = false
    },
    handleCloseHelp() {
      this.helpDialog = false
    },
  }
}
</script>

自定义注册组件
这是帮助页面，页面名为Help.vue
个人信息、关于页面都是相似写法，组件名记得改一下就行了

<template>
  <el-dialog
    class="system-dialog"
    :visible.sync="helpDialog"
    append-to-body
    width="30%"
    @close="handleClose"
  >
    <div slot="title" style="color:#FE6D6C;">
      <i class="el-icon-user-solid">
        {{ "帮助" }}
      </i>
    </div>
    <div style="text-align:center">
    	<!-- 这里存放弹框内容，自己修改就行了 -->
    </div>
    <div slot="footer" />
  </el-dialog>
</template>
<script>

export default {
  name: 'Help',
  data() {
    return {
      helpDialog: true,
      currentComponent: 'Help',
    }
  },
  methods: {
    handleClose() {
      this.helpDialog = false
      this.$emit('close', false)
    }
  }
}
</script>