代码地址：

https://github.com/hurong241/vue_study/tree/master/vue2-cli/src/components/69

App.vue

<template>
  <div class="app">
    <div>
      p69:vue scoped样式：<br/>
      应用场景：如果多个组件被同时引用，且存在样同的样式名，会产生冲突<br/>
      效果：加上scoped后,样式所在标签会产生一个随机数，形如：p data-v-71e22880 class="name" <br/>
      本例中的.name样式冲突，加上scoped后解决<br/>
      用法：在组件xx.vue中的style上加scoped,如：'style scoped'<br/>
      <hr/>
    </div>
    <School></School>
  </div>
</template>

<script>
//引入组件
import School from "./components/69/School.vue";

export default {
  name: 'App',
  components: {
    School,
  }
}
</script>

<style>
.app {
  background-color: #999;
  padding: 10px;
}
</style>

School.vue

<template>
  <div>
    <!--语法检查：所有有模板内容都应该放在最外层的div内-->
    <p>id：{{ school.id }}</p>
    <p class="name">名称：{{ school.name }}</p>
    <p>地址：{{ school.address }}</p>
    <button @click="showId(school.id)">弹出id</button>
    <hr/>
    <Student></Student>
  </div>
</template>

<script>
import Student from './Student.vue'
import {mixin} from "@/mixin";

export default {
  name: 'MySchool',//名称格式示例要2个词组成首字母大写：MySchool
  components: {
    Student
  },
  data() {
    return {
      school: {
        'id': '001',
        'name': '清华',
        'address': '北京'
      }
    }
  },
  methods: {
    //提到mixin.js中去了
    // showId(value) {
    //   alert(value)
    // }
  },
  //混入：如果多个组件中有相同功能的方法，可以移到mixin中实现共用
  mixins: [mixin],
}
</script>

<style scoped>
.name{
  font-size:60px;
  color:blue;
}
</style>