Article directory
foreword
We all know that in Vue, the role of adding scoped is only useful for the current component (style)
<style scoped>
</style>
Case analysis scoped principle
Home.vue
<template>
<div class="home">
<h1>hello</h1>
<HelloWorld msg="Welcome to Your Vue.js App"/>
</div>
</template>
<script>
import HelloWorld from '@/components/HelloWorld.vue'
export default {
name: 'Home',
components: {
HelloWorld
}
}
</script>
<style scoped>
h1{
color: red;
}
</style>
HelloWorld.vue
<template>
<div class="hello">
<h1>{
{
msg }}</h1>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
msg: String
}
}
</script>
<style scoped lang="less">
</style>
The result is as follows
Such a process is that for a certain component, if the scoped attribute is added to the style, a custom attribute of data-v-xxx is added to the structure of the current sub-component. We will find that Vue is added to the need through the attribute
selector Add styles to the elements
We can easily find out based on the above results. The parent component will also render the root component in the child component, we might as well try to
change the structure of the child component HelloWorld.vue
<template>
<h1>{
{
msg }}</h1>
</template>
The result is
depth selector
We sometimes hope that the style of the parent component can affect the style of the child component.
We should first think of directly removing the scoped attribute Home.vue
in the style tag.
<style>
h1{
color: red;
}
As a result
, however, instead of processing elements according to custom attributes, they are routinely styled according to tag names.
In fact, we can use deep attribute selectors
Depth attribute selector
original css
>>>h1{
color: red;
}
less
/deep/ h1{
color:red;
}
scss
::v-deep h1{
color:red;
}
All three of the above can achieve the effect of still relying on custom attributes to select the label rendering style