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>