组件：用于将某个功能的 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>

五、最终效果

原创作者：吴小糖

创作时间：2024.1.6