组件：用于将某个功能的 HTML、CSS、JS 封装到一个文件中，提高代码的复用性和可维护 性。
基础使用【setup 语法糖写法】
一、在 src / components 文件夹中创建一个组件，文件命名为 MyDemo 。
<template> <p class="redColor">组件数据：{{ num }}</p> <button @click="num++">点击+1</button> <hr /> </template> <script setup> import { ref } from "vue"; let num = ref(0); </script> <style scoped> .redColor { color: red; } </style>
注：文件名自定义，文件内容正常书写即可。
二、在页面中引入组件，以标签的形式使用组件。
<template> <h3>使用组件</h3> <MyDemo></MyDemo> <!-- 2、使用组件 --> <MyDemo /> <!-- 2、使用组件 --> <my-demo></my-demo> <!-- 2、使用组件 --> <my-demo /> <!-- 2、使用组件 --> </template> <script setup> // 1、引入组件 import MyDemo from '@/components/MyDemo.vue'; </script>
注：在 setup 语法糖中引入的组件，不需要注册，可以直接使用。
三、最终效果：
