vue快速入门（三十三）scoped解决组件样式冲突

news2025/1/16 16:19:09

注释很详细，直接上代码

新增内容
scoped解决样式冲突的用法

源码

MyHeader.vue

<!-- 用于测试全局注册组件 -->
<template>
    <div id="myHeader">
        <h1>又可以愉快的学习啦</h1>
    </div>
</template>

<script>
    export default {
        
    }
</script>
<!-- 我们可以发现加上scoped属性，组件的样式是独立出来的而不会影响其他组件
     具体原因是vue会给组件添加一个唯一的属性，并且在该组件的所有样式中标注，
     这样就可以避免样式污染 -->
<style lang="less" scoped>
h1{
    color: blue;
}
</style>

MyMain.vue

<!-- 用于测试局部注册组件 -->
<template>
    <div id="mymain">
        <h1>啊对对对</h1>
    </div>
</template>

<script>
    export default {
        
    }
</script>
<style lang="less" scoped>
h1{
    color: red;
}
</style>

App.vue

<template>
  <div id="app">
    <MyHeader></MyHeader>
    <MyMain></MyMain>
  </div>
</template>

<script>
// 导入局部注册组件
import MyMain from './components/MyMain.vue';

export default {
  name: 'App',
  components: {//注册局部注册组件
   MyMain:MyMain,
  }
}
</script>
<style>
*{
  margin: 0;
  padding: 0;
}
</style>

main.js

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

//全局导入组件
import MyHeader from './components/MyHeader.vue'

//全局注册组件
Vue.component('MyHeader',MyHeader)

new Vue({
  render: h => h(App),
}).$mount('#app')