VUE 组件，与 全局样式 局部样式的一个限定

周大胖子

1. <template>
2.     <div id="home">
3.         <!-- 头部组件引入 -->
4.         这是home组件 <span class="lmtest">测试值是否变色</span>
5.         <v-head></v-head>
6.     </div>
7. </template>
9. <script>
10. // 1.引入头部组件  【组件文件尽量放在 components/ 目录中，大写首字母的.vue文件 】
11. // 2.注册组件 【 注意如果下面components内容为ES6 语法 则html 则写成对应的标签  】
12. // 3.引入组件 【在页面中写入<v-head></v-head> 】
13. import Head from "./Head.vue";
14. export default {
15.   data() {
16.     return {};
17.   },
18.   methods: {
19.   },
20.   name: "app",
21.   components: {         //这用于组件的注册，
22.     'v-head':Head
23.   }
24. };
25. </script>
27. 在这有个小知识点  scoped  则不会被别的组件分享掉该组件 样式  如果不写则为全局样式，也可以用html 包装
28. <style scoped>
29. .lmtest {
30.   background: #000;
31.   color: #fff;
32. }
33. h2 {
34.   font: 10px;
35. }
36. </style>

复制代码