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、效果如下：