vue $attrs 实现某些功能的动态扩展

@大家可以先看看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>

以上就是代码实现部分，欢迎大家在底下留言指出我不正确的地方。谢谢大家了。