020.Vue3入门，sytle中加入scoped只在这个文件中生效

1、全局代码App.vue如下

<script setup>
import Testpage001 from './view/Testpage001.vue'
import Testpage002 from './view/Testpage002.vue'
</script>

<template>
  <div class="style1">测试1</div>
  <Testpage001/>
  <Testpage002/>
</template>

<style>
.style1 {
  color: red;
  font-size: 30px;
}
</style>

2、Testpage001代码如下

<template>
  <div class="style1">测试1</div>
</template>

<script>
</script>

3、Testpage002代码如下

<template>
  <div v-bind:class="testCls">测试2</div>
</template>

<script>
export default {
  data() {
    return {
      testCls: "style1",
    }
  }
}
</script>

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

4、效果如下：