Vue組件化學(xué)習(xí)之scoped詳解

更新時(shí)間：2022年02月16日 11:03:13 作者：我會(huì)努力變強(qiáng)的

這篇文章主要為大家詳細(xì)介紹了Vue組件化學(xué)習(xí)之scoped，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助

簡(jiǎn)介

主要介紹scoped的作用。

先弄一個(gè)案例：

在這里插入圖片描述

main.js：

//引入vue依賴
import Vue from 'vue'
//引入組件App
import App from './App.vue'
// 關(guān)閉生產(chǎn)提示
Vue.config.productionTip = false
//創(chuàng)建一個(gè)vue實(shí)例
new Vue({
  //這個(gè)目前還沒學(xué)過，先知道他的作用是將app放入容器中。
  render: h => h(App),
  //配置該vue實(shí)例管理id為app的容器
}).$mount('#app')

App.vue：

<template>
    <!-- 編寫結(jié)構(gòu) -->
    <div>
        <school></school>
    <hr>
    <student></student>
    </div>
</template>
<script>
// 原本的引入
// import school from "./School.vue"
// import student from "./Student.vue"
//修改后的
//引入school組件和student組件,涉及es模塊化的語法
import school from "./components/School.vue"
import student from "./components/Student.vue"
export default {

    components:{
        //注冊(cè)組件
        school,
        student
    }
}
</script>
<style>
</style>

School.vue：

<template>
    <!-- 編寫組件結(jié)構(gòu)代碼，也就是html代碼 -->
    <!-- 需要一個(gè)div括住，也就是只能有一個(gè)根元素，一般使用div -->
    <div class="orange">
        <div>學(xué)校：{{schoolName}}</div>
        <div>地址：{{schoolAddress}}</div>
    </div>
</template>
<script>
//交互代碼編寫的地方，需要暴露出去給其他地方引入
//這個(gè)需要有一點(diǎn)es6模塊化的知識(shí)，這里一般使用默認(rèn)暴露，因?yàn)檫@是單文件組件，只需要暴露一個(gè)組件對(duì)象，
//并且引入默認(rèn)暴露的組件引入語法比較簡(jiǎn)單。
export default {
    data() {
        return {
        schoolName:"尚硅谷",
        schoolAddress:"北京"
        }
    },
}
</script>
<style>
    /* 編寫樣式的地方 */
    .orange{
        background-color: orange;
    }
</style>

student.vue：

<template>
    <!-- 編寫組件結(jié)構(gòu)代碼，也就是html代碼 -->
    <!-- 需要一個(gè)div括住，也就是只能有一個(gè)根元素，一般使用div -->
    <div class="orange">
        <div>學(xué)生姓名：{{studentName}}</div>
        <div>年齡：{{studentAge}}</div>
    </div>
</template>
<script>
//交互代碼編寫的地方，需要暴露出去給其他地方引入
//這個(gè)需要有一點(diǎn)es6模塊化的知識(shí)，這里一般使用默認(rèn)暴露，因?yàn)檫@是單文件組件，只需要暴露一個(gè)組件對(duì)象，
//并且引入默認(rèn)暴露的組件引入語法比較簡(jiǎn)單。
export default {
    data() {
        return {
        studentName:"張三",
        studentAge:18
        }
    },
}
</script>
<style>
    /* 編寫樣式的地方 */
    .orange{
        background-color: gray;
    }
</style>

效果：

在這里插入圖片描述

看兩個(gè)組件的樣式代碼，都使用了同名的orange類來設(shè)置樣式，但是一個(gè)設(shè)置背景顏色為橙色，一個(gè)為灰色，父組件App最后會(huì)匯總所有子組件中的樣式，這樣的話，這兩個(gè)樣式設(shè)置就沖突了，所以導(dǎo)致School組件的背景色本來應(yīng)該是橙色的，但是變成灰色了。

所以，引入scoped的作用:使樣式在局部生效，防止沖突。

添加在style標(biāo)簽中的，

在這里插入圖片描述