vue+mixin项目中的用法

最新推荐文章于 2024-11-26 11:51:17 发布

原创最新推荐文章于 2024-11-26 11:51:17 发布

· 166 阅读

版权

本文探讨了在Vue项目中如何通过mixin处理路由跳转时的关键词拼接，以及如何根据用户权限控制表单编辑。介绍了props、provide/inject、Vuex和mixin四种传递关键词的方法，并举例说明了mixin在权限判断中的应用，如在详情和编辑页面中禁用表单和控制提交按钮。同时，提到了路由参数加密的必要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本篇文章只是个人的项目记录
mixin的解析就不在多解释
需求：路由跳转会拼接关键词，详情页面和编辑用的是同一个页面，只是对表单进行了禁用，以及对提交的按钮进行了控制，但是该用户没有编辑内容的权限，所以路由跳转并不严谨（如果路由传参关键词id等需要响应式，不能用mixin的情况，就需要传参加密！！！ 参考地址：Vue之路由的query传参加密）

传递关键词的方法有四种，主要讲mixin的项目使用。
1- 父组件用v-bind来传递，子组件用props来接收（不适用于路由跳转并且如果组件层级深的话只能用props一层一层传递）
2- provide和inject（大范围有效的 props）
官网上说provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的 property 还是可响应的。
我理解的意思就是说如果要实现父子组件响应，父组件传递的数据类型必须是对象Object，子组件接收的数据类型必须是对象Object，其他数据类型都是不好使的。
3- 用vuex的状态管理，eventbus组件通信
4- mixin公共的组件，在mixin里设置关键词，路由名称创建的时候关键词（详情detail）（编辑edit）
mixin.js

data （） {
	return {
		disabled: false
	}
}
created () {
	if (this.$route.name === 'detail') this.disabled = true
}

page1.vue

<template>
	<el-input :disabled="disabled"></el-input>
</template>
import mixin from './mixin';
export default {
  mixins: [mixin ]
}