<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="handleClick">Click me</button>
  </div>
</template>

<view>
  <text>{{ message }}</text>
  <button bindtap="handleClick">Click me</button>
</view>

<template>
  <div class="my-component">
    <!-- 组件内容 -->
  </div>
</template>

<script>
export default {
  // 组件逻辑
}
</script>

<style>
.my-component {
  /* 组件样式 */
}
</style>

// 组件的JSON配置文件
{
  "component": true,
  "usingComponents": {},
  "options": {},
  "style": {},
  "template": "<view class='my-component'></view>",
  "methods": {}
}

<template>
  <div>
    <input v-model="message" />
    <p>{{ message }}</p>
  </div>
</template>

<view>
  <input bindinput="handleInput" value="{{ message }}" />
  <text>{{ message }}</text>
</view>

<template>
  <div class="my-component">
    <!-- 组件内容 -->
  </div>
</template>

<style>
.my-component {
  color: red;
}
</style>

/* 组件的WXSS样式文件 */
.my-component {
  color: red;
}

export default {
  created() {
    // 组件创建时触发
  },
  mounted() {
    // 组件挂载到DOM时触发
  },
  // ...
}

Component({
  created() {
    // 组件创建时触发
  },
  attached() {
    // 组件挂载到DOM时触发
  },
  // ...
})