组件：用于将某个功能的 HTML、CSS、JS 封装到一个文件中，提高代码的复用性和可维护性。
创建组件
一、在根目录中创建 components 文件夹，右键点击新建组件。
二、输入组件名称、选择默认模板、点击创建组件。
三、在组件中正常编写内容即可。
<template> <view class="mytest"> <view>组件数据：{{ num }}</view> <button @click="add">点击+1</button> </view> </template> <script> export default { name:"my-test", data() { return { num: 0, }; }, methods:{ // 事件方法 add(){ this.num++; }, } } </script>
四、在页面中引入，通过 components 配置项注册并使用组件。
<template> <view class="home"> <view>首页</view> <!-- 使用组件 --> <my-test></my-test> </view> </template> <script> // 引入组件 import myTest from "../../components/my-test.vue"; export default { components: { myTest }, // 注册组件 // 其它配置... } </script>
五、最终效果
