018、钩子函数 mounted和beforeDestroy、父组件向子组件传递参数 props 的使用

1、mounted 和 beforeDestroy

1.1、mounted

mounted() 钩子函数在组件被挂载到 DOM 后调用。代码 document.addEventListener(“click”, this.closeMenu) 在组件挂载后，为整个文档添加了一个点击事件监听器，当用户在文档任何地方点击时，都会触发 this.closeMenu 方法。

<script>
  export default {
 mounted() {
      //动作
    },

1.2、beforeDestroy

beforeDestroy() 钩子函数在组件被销毁之前调用。代码 document.removeEventListener(“click”, this.closeMenu) 在组件销毁之前，移除之前添加的点击事件监听器，避免组件销毁后仍然存在监听器，导致潜在的错误或内存泄漏。

 <script>
  export default {
 beforeDestroy() {
       //动作
    },

2、父组件向子组件传递参数 props

2.1、子组件定义

<script>
  export default {
    props: ["clientX", "clientY", "clickIndex","tagsLength"],
    //其余内容略
    }

2.2、父组件调用子组件并传参

<template>
//其余略
<TagsMenu v-show="isShowTagsMenu" :clientX="clientX" :clientY="clientY" :clickIndex="clickIndex"
      :tagsLength="tags.length" />
      //其余略
</template>
<script>
  import TagsMenu from './TagsMenu.vue';
  //其余略

3、完整例子

3.1、父组件 Tags.vue

<template>
  <div class="tags">
    <!-- .native 用法：在 Vue.js 中，.native 修饰符用于监听原生 DOM 事件，而不是 Vue 组件的自定义事件。
    例如，@contextmenu.native="rightClick($event)"
    .prevent 阻止浏览器默认行为
    表示你希望监听原生的 contextmenu 事件（通常是右键点击），
    而不是 Vue 组件中可能定义的 contextmenu 事件。这在你想要直接处理 DOM 事件时非常有用，
    尤其是当组件内部没有提供相应的事件时。 -->
    <el-tag size="medium" :closable="index>0" v-for="item,index in tags" :key="item.path"
      :effect="item.title==$route.name?'dark':'plain'" @click="goTo(item.path)" @close="close(index)"
      :disable-transitions="true" @contextmenu.native.prevent="rightClick($event,index)">
      <i class="cir" v-show="item.title==$route.name"></i>
      {{item.title}}</el-tag>

    <TagsMenu v-show="isShowTagsMenu" :clientX="clientX" :clientY="clientY" :clickIndex="clickIndex"
      :tagsLength="tags.length" />
  </div>
</template>

<script>
  import TagsMenu from './TagsMenu.vue';
  export default {
    components: {
      TagsMenu
    },
    data() {
      return {
        tags: [{
          title: "layout",
          path: "/layout",
          isActive: true,
        }],
        isShowTagsMenu: false,
        clientX: 0,
        clientY: 0,
        clickIndex: 0,
      }
    },
    mounted() {
      document.addEventListener("click", this.closeMenu)
    },
    beforeDestroy() {
      document.removeEventListener("click", this.closeMenu)
    },
    methods: {
      closeMenu() {
        this.isShowTagsMenu = false
      },
      rightClick(e, i) {
        console.log("右键点击了", e.clientX, e.clientY, i);
        this.clientX = e.clientX;
        this.clientY = e.clientY;
        this.isShowTagsMenu = true;
        this.clickIndex = i;
        //关闭浏览器的默认行为
        window.event.returnValue = false;
        return false;
      },
      goTo(path) {
        this.$router.replace({
          path: (path == '/' || path == undefined ? '/Index' : path)
        });
      },
      close(index) {
        const name = this.tags[index].title;
        this.tags.splice(index, 1);
        if (this.tags.length == 0) return;
        //如果关闭当前页，则激活最后一个标签页
        const path = this.tags[this.tags.length - 1].path;
        if (name === this.$route.name && this.tags.length != 0) {
          this.$router.replace({
            path: (path == '/' || path == undefined ? '/Index' : path)
          });
        }

      }
    },
    watch: {
      $route: {
        immediate: true,
        handler(val, oldVal) {
          console.log(val);
          const bool = this.tags.find(item => {
            return item.path == val.path;
          });

          if (!bool) {
            this.tags.push({
              title: val.name,
              path: val.path
            });
          }

        }
      }
    }

  }
</script>

<style scoped>
  .tags {
    margin-top: 3px;
    /* 添加距离上边缘的距离 */
  }

  .tags .el-tag {
    padding-left: 10px;
    padding-top: 0px;
    margin-right: 5px;

    .cir {
      width: 8px;
      height: 8px;
      margin-right: 4px;
      background-color: #fff;
      border-radius: 50%;
      display: inline-block;
    }
  }
</style>

3.2、子组件 TagsMenu.vue

<template>
  <div class="tags-menu" :style="{left:clientX+'px',top:clientY+'px'}">
    <ul>
      <li v-for="item,index in tmenu" :key="index" v-show="isShowLi(index)">
        <i :class="item.icon"></i>
        {{item.text}}
      </li>
      <li>{{clientX+","+clickIndex}}</li>
    </ul>
  </div>
</template>

<script>
  export default {
    props: ["clientX", "clientY", "clickIndex","tagsLength"],
    methods: {
      isShowLi(i) {
        if(this.tagsLength===1){
          //只有首页
          return i===0;
        }
        if (this.clickIndex == 0) {
          return ![1, 3].includes(i)
        }
        if(this.clickIndex == 1 && this.clickIndex==this.tagsLength-1){
          return ![3,4].includes(i)
        }else if(this.clickIndex == 1 && this.clickIndex!=this.tagsLength-1){
          return ![3].includes(i)
        }else if(this.clickIndex==this.tagsLength-1){
          return ![4].includes(i)
        }
        return true;
      }
    },
    data() {
      return {
        tmenu: [{
            icon: "el-icon-refresh-right",
            text: "刷新页面"
          },
          {
            icon: "el-icon-close",
            text: "关闭当前"
          },
          {
            icon: "el-icon-circle-close",
            text: "关闭其他"
          },
          {
            icon: "el-icon-back",
            text: "关闭左侧"
          },
          {
            icon: "el-icon-right",
            text: "关闭右侧"
          },
          {
            icon: "el-icon-circle-close",
            text: "关闭全部"
          }
        ]
      }
    }
  }
</script>

<style>
  .tags-menu {
    position: absolute;
    z-index: 1000;
    /* 确保菜单在最上层 */
    background-color: white;
    /* 设置背景颜色为白色 */
    border: 1px solid #ddd;
    /* 添加边框 */
    border-radius: 4px;
    /* 圆角效果 */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    /* 添加阴影 */
    padding: 10px;
    /* 内边距 */
    min-width: 120px;
    /* 最小宽度 */
    /* 可选：添加过渡效果 */
    transition: opacity 0.2s ease;
  }

  .tags-menu ul {
    list-style: none;
    /* 去掉列表样式 */
    margin: 0;
    /* 去掉外边距 */
    padding: 0;
    /* 去掉内边距 */
  }

  .tags-menu li {
    padding: 8px 12px;
    /* 单个菜单项的内边距 */
    cursor: pointer;
    /* 鼠标悬停变成手指 */
    transition: background-color 0.2s;
    /* 添加过渡效果 */
  }

  .tags-menu li:hover {
    background-color: #f5f5f5;
    /* 悬停时的背景颜色 */
  }
</style>

3.3、效果图