@大家可以先看看vue $attrs的介绍vue $attrs
先说说我在项目中遇到的问题吧, 我这里是有个右键菜单,右键菜单是可以动态扩展的,比如以后需要一个更新的功能,就需要添加一个更新的功能,额外的功能都是根据项目需求来的,不可能一次性就把所有的右键功能全部写出来
首先说下这个组件自己逻辑的实现,右键菜单通过v-for循环出来,通过v-for循环出来第一个需要注意的地方就是,每个右键菜单的功能不同,它们所绑定的点击事件就会不同,通过把这个功能的函数名,写在它v-for遍历出来的这个对象里面,比如我这里 ‘打开’ 这个功能的函数名就是 open, 它的click属性就是 open,需要定义一个open方法
<template v-for="(menuItem, index) in computedMenuConfig">
<a
href="javascript:;"
:key="menuItem.click"
@click="menuItem.click && wrapperFunction(menuItem.click)"
>
<i :class="menuItem.icon"></i>
</a>
</template>
<script>
export default {
props: {
moreMenuConfig: { // 从父组件接受到的动态扩展的右键菜单项
type: Array
}
}
methods: {
wrapperFunction(click, params) { // 一个中间层函数
this.rightMenuHandle(click, params) // click === open, 就是执行的this.open()方法
},
rightMenuHandle(click, params) { // 大家这个地方不懂的,可以往下看,我贴出了这个组件在父组件中如何被调用的
// this.$attrs这个组件里面没有定义update这个prop,但是传了过来,直接通过this.update是访问不到的,但是可以通过this.$attrs 来访问到
let notExistProps = this.$attrs // {update: function() {}} ,增加了一个功能,update, 右键点击update的时候,直接调用父组件的update方法,这个组件把当前选中的item传给父组件,父组件里面把对应的逻辑写好,这个组件就是负责执行父组件的update方法
let clickHandle = notExistProps[click] || this[click] // open方法不在 notExistProps里面,clickHandle = this.open, 执行的就是子组件自己的open方法
// update 方法在 notExsitProps里面,clickHandle = this.update, 执行的就是父组件的update方法,子组件也不需要动态扩展props,或者是动态扩展 methods(我刚开始的想法就是子组件动态扩展方法,动态扩展props,找了好久都没有找到,有大佬知道的,麻烦告诉我下~)
clickHandle(this.currentItem.name, params)
},
open() {
console.log('open')
}
},
computed: {
computedMenuConfig() {
return this.rightMenuBaseConfig.concat(this.moreMenuConfig)
}
},
data() {
return {
rightMenuBaseConfig: [ // 基础配置
{
name: '打开',
click: 'open',
icon: 'el-icon-folder-opened'
},
],
}
}
}
</script>
写完这个组件自身的功能之后,来看下这个组件动态扩展的部分, 动态扩展部分的逻辑在父组件里面,不属于这个组件自己的逻辑,父组件中调用这个组件:
// 父组件调用这个子组件
<template>
<work-space-file-content
:update="update"
:moreMenuConfig="[{name: '更新', click: 'update', icon: 'el-icon-opened'}]" // 父组件给这个组件传递一个需要的功能项, 子组件在渲染过程当中肯定会报错的,因为子组件不存在这个 update方法,我们需要做的就是把这个 update的方法也给子组件传过去,当然,子组件中是肯定没有定义 update这个props的,就导致我们传了方法过去之后,也调用不了这个方法,$attrs 这个api 就来了
/>
</template>
<script>
export default {
methods: {
update(item) { // 父组件把这个update方法定义好,给子组件传过去
console.log(item)
}
}
}
</script>
以上就是代码实现部分,欢迎大家在底下留言指出我不正确的地方。谢谢大家了。