mixin 混入/合
含义:两个不同的组件,共享一个相同的配置
用法:
1.定义混合及配置公有方法(对象形式)
export const hunhe = { // 将混合对象分别暴露
methods: {
showName() {
alert(this.name);
}
},
mounted() {
console.log('姚姚');
},
}
2.使用混合
(1.)局部混合--分别放在需要的组件中
import {hunhe} from '../mixin'
mixins:[hunhe]
####(2.)全局混合---放在main里,所有vm,vc都有一份
import { hunhe } from './mixin'
// vm+vc全体注册mixin
Vue.mixin(hunhe);
注意点
1.本来有的代码有限
生命周期都有
_scoped样式
背景
多个组件如果样式重名,会导致引入时发生样式覆盖,后来居上。为了解决样式名重合这一问题,我们提出scoped(局部的)属性
使用方法 在style旁加scoped
<div class="test">
<h2>学校名称:{{name}}</h2>
<h2>学校地址:{{address}}</h2>
</div>
<style scoped>
.test{
background-color: pink;
}
</style>
.test属性,只服务于此处的div
注意
当App组件内使用style时,如果想给所有组件加相同效果就不要加scoped
lang属性 设定样式使用的语言(css/less''')
使用方法
<style lang="less">
.test{
background-color: pink;
.any{
font-size: 60px;
}
}
</style>