Vue小知识
2022-01-19 本文已影响0人
没名字的某某人
环境变量
在process.env
中就可以访问到当前环境变量,应用于baseURL
配置,可在 .env 文件中以 VUE_APP
为前缀定义自定义属性。更多介绍移步掘金
多个组件引入
// componentsImport.js
export {default as TurnoverMoney} from "./TurnoverMoney.vue";
export {default as ProjectType} from "./ProjectType.vue";
// .vue
import * as itemElements from "../itemElement";
export default{
...
components: { ...itemElements },
}
认识Vue.use()和install方法
利用use方法,可以帮助我们注册好组件和自定义指令
// 引入组件
import LoadingComponent from './loading.vue'
// 定义 Loading 对象
const Loading={
// install 是默认的方法。当外界在 use 这个组件的时候,就会调用本身的 install 方法,同时传一个 Vue 这个类的参数。
install:function(Vue){
Vue.component('Loading',LoadingComponent)
}
}
// 导出
export default Loading
// 其中'./components/loading/index' 的 /index 可以不写,webpack会自动找到并加载 index 。如果是其他的名字就需要写上。
import Loading from './components/loading/index'
// 这时需要 use(Loading),如果不写 Vue.use()的话,浏览器会报错,大家可以试一下
Vue.use(Loading)
更多介绍移步掘金
vue+vscode断点调试
参考掘金
动态生成面包屑
根据routes
路由表层级访问动态生成面包屑,在$route.matched
属性中,可以查看当前路由层级关系,配合在层级路由meta
属性,可动态渲染面包屑
// routes中配置
{
path:'/',
meta:{title:'首页'},
children:[
{
...
path:'manage',
meta:{title:'活动管理'},
children:[
{
...
path:'list',
meta:{title:'活动列表'}
}
]
}
]
}
// 面包屑代码
<el-breadcrumb-item v-for="breadCrumbItem in breadCrumbList" :key="breadCrumbList.path">
{{breadCrumbItem.meta.title}}
</el-breadcrumb-item>
...
computed:{
breadCrumbList() {
return this.$route.matched;
}
}
...
检测元素外部(或内部)的单击
有时候需要检测单击是发生在特定元素el
的内部还是外部,通常使用的方法是:
window.addEventListener('mousedown', e=>{
// 获取被点击元素
const clickedEl = e.target;
if(el.contains(clickedEl)){
// 在 el 内点击
} else{
// 在 el 外点击
}
])
组件元数据
并不是添加到一个组件的每一点信息都是状态。有时我们需要添加一些元数据,给其他组件提供更多信息。
export default {
name: 'LiveUsersWidget',
// 👇 只需将其作为一个额外的属性添加
columns: 3,
props: {
// ...
},
data() {
return {
//...
};
},
};
你会发现这个元数据是组件上的一个属性。
import LiveUsersWidget from './LiveUsersWidget.vue';
const { columns } = LiveUsersWidget;
我们也可以通过特殊的$options
属性从组件内部访问元数据。
export default {
name: 'LiveUsersWidget',
columns: 3,
created() {
// 👇 `$options` contains all the metadata for a component
console.log(`Using ${this.$options.metadata} columns`);
},
};
只要记住,这个元数据对组件的每个实例都是一样的,而且不是响应式的。
这方面的其他用途包括(但不限于):
- 保持单个组件的版本号
- 用于构建工具的自定义标志,以区别对待组件
- 在计算属性、数据、watch 等之外为组件添加自定义功能
- 其它