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>

posted on 2023-07-05 13:45 wuzx-blog 阅读(16) 评论(0) 编辑收藏举报