小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。
今天主要分享三个小技巧，比较简单，说是技巧也可以看成总结，分别是
v-for中的解构- 深度选择器实现跳出 scoped 样式覆盖
- Mixin 局部样式和全局样式
v-for 中的解构
罗列出所有 v-for 中解构方式
- 首先是最普通的解构方式，也是我们第一个能够想到解构方式
<ul >
<li v-for="{ title, id } in tuts" :key="id">{{title}}</li>
</ul>
tuts:[
{id:0,title:"machine learning"},
{id:1,title:"deep learning"},
{id:2,title:"meta learning"},
]
- 然后就是大家知道使用组元形式获取列表序列索引的信息。
<ul>
<li v-for="(title,index) in [
'Machine learing',
'Deep learning',
'Meta learning'
]" :key="index">{{index + 1}} - {{title}}</li>
</ul>
- 解构一个对象时，解构每条属性时第一个值是属性值，而第二个值是属性名称
<ul>
<li v-for="(value,key) in {
'title':'machine learning',
'lesson':12,
'author':'mike'
}" :key="key">{{ key}} : {{value}}</li>
</ul>
对于解构对象情况下，我们还可以通过组元第三个数值获取属性的索引信息
<ul>
<li v-for="(value,key,index) in {
'title':'machine learning',
'lesson':12,
'author':'mike'
}" :key="index">{{index + 1}} {{ key}} : {{value}}</li>
</ul>
深度选择器实现跳出 scoped 样式覆盖
scoped 内的 CSS 有效地解决了组件间 style 覆盖的问题，让代码看上去更整洁，不过有时候我们还需要跳出这个束缚，需要在父级组件对子组件进行覆盖，这时就可以用到 Vue 的一个深度选择器。
<style scoped>
.parent-component >>> .child-compoent{
font-size: 36px;
}
</style>
App.vue
<div class="parent-component">
<child/>
</div>
<style scoped>
.parent-component >>> .child-compoent{
font-size: 36px;
}
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
Child.vue
<template>
<div>
<h1 class="child-component">Child Component</h1>
</div>
</template>
Mixin 局部样式和全局样式
通常来说我们希望一个组件是相对独立的，与外界保持一定界限独立的领域，所以样式通常定义为 scoped
<style scoped>
.component {
background: orangered;
}
</style>
但有时候我们还不希望重复样式出现，所以需要在组件内对于哪些是属于全局的哪些是属于组件的进行划分然后分别定义两个作用域来定义
<style>
/* 全局样式 */
.component p {
margin-bottom: 16px;
}
</style>
<style scoped>
/* 专属该组件的样式 */
.component {
background: green;
}
</style>
