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>