08:vue3 组件基础
定义一个组件
在components文件夹下新建MyComponent.vue组件
写入下面代码
1 <script> 2 export default { 3 data() { 4 return { 5 count: 0 6 } 7 } 8 } 9 </script> 10 11 <template> 12 <button @click="count++">我被点击了 {{ count }} 次!</button> 13 <div class="container scopedTest">组件内样式生效</div> 14 </template> 15 <!--scoped 组件内样式有效--> 16 <style scoped> 17 .container{ 18 font-size: 30px; 19 } 20 </style> 21 22 <style> 23 .scopedTest{ 24 color: red; 25 } 26 </style>
在App.vue页面引用组件步骤
1 <template> 2 3 <!-- 第三步:显示组件 --> 4 <MyComponent></MyComponent> 5 </template> 6 7 <script> 8 //第一步:引入组件 9 import MyComponent from "./components/MyComponent.vue"; 10 11 //第二步:注入组件 12 export default{ 13 components:{ 14 MyComponent:MyComponent 15 } 16 } 17 18 </script>