08：vue3 组件基础

定义一个组件

在components文件夹下新建MyComponent.vue组件

 写入下面代码

<script>
export default {
  data() {
    return {
      count: 0
    }
  }
}
</script>

<template>
  <button @click="count++">我被点击了 {{ count }} 次！</button>
  <div class="container scopedTest">组件内样式生效</div>
</template>
<!--scoped 组件内样式有效-->
<style scoped>
.container{
    font-size: 30px;
}
</style>

<style>
.scopedTest{
    color: red;
}
</style>

在App.vue页面引用组件步骤

<template>

<!-- 第三步：显示组件 -->
<MyComponent></MyComponent>
</template>

<script>
//第一步：引入组件
import MyComponent from "./components/MyComponent.vue";

//第二步：注入组件
export default{
  components:{
    MyComponent:MyComponent
  }
}

</script>