Vue 中 props

在 Vue 中，props 是用于定义组件接收的数据属性。

子组件

自定义组件的定义

比如下面，定义了三个自定义组件变量 props:["clientX","clientY","clickIndex"]

 export default{
    props:["clientX","clientY","clickIndex"],
    data() {}
    }

完整的单文件组件 举例

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

<script>
  export default{
    props:["clientX","clientY","clickIndex"],
    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>

父组件

引用子组件并声明自定义属性

在引入 TagsMenu组件时，声明自定义变量 <TagsMenu v-show="isShowTagsMenu" :clientX="clientX" :clientY="clientY" :clickIndex="clickIndex"></TagsMenu>,然后可以直接赋值，这里是动态赋值

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

<script>
  import {
    Tag
  } from 'element-ui';
  import TagsMenu from './TagsMenu.vue';
  export default {
    components: {
      TagsMenu
    },
    data() {
      return {
        isShowTagsMenu: false,
        clientX: 0,
        clientY: 0,
        clickIndex: 0,
      }
    },
    
   
    }

  }
</script>