Vue.js单文件组件从入门到实战：开发效率提升指南

<template>
  <!-- 模板：组件的HTML结构，仅允许一个根元素 -->
  <button class="custom-btn" @click="handleClick">
    {{ label }}
  </button>
</template>

<script>
// 逻辑：组件的JS代码，需导出Vue组件对象
export default {
  name: 'CustomButton', // 组件名（建议大驼峰）
  props: {
    label: { type: String, required: true } // 父组件传递的属性
  },
  methods: {
    handleClick() {
      this.$emit('btn-click') // 触发父组件事件
    }
  }
}
</script>

<style scoped>
/* 样式：组件的CSS，scoped表示样式仅作用于当前组件 */
.custom-btn {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  background: #42b983;
  color: #fff;
  cursor: pointer;
}
</style>

<!-- 父组件：Parent.vue -->
<template>
  <CustomButton label="点击我" /> <!-- 传递label属性 -->
</template>

<!-- 子组件：CustomButton.vue -->
<script>
export default {
  props: {
    label: {
      type: String, // 属性类型
      required: true, // 是否必传
      default: '默认按钮' // 可选默认值（仅在非required时生效）
    }
  }
}
</script>

<!-- 子组件：CustomButton.vue -->
<script>
export default {
  methods: {
    handleClick() {
      this.$emit('btn-click', '我是子组件传递的参数') // 触发事件并传参
    }
  }
}
</script>

<!-- 父组件：Parent.vue -->
<template>
  <CustomButton 
    label="点击我" 
    @btn-click="handleBtnClick" <!-- 监听子组件事件 -->
  />
</template>

<script>
export default {
  methods: {
    handleBtnClick(param) {
      console.log('子组件触发了点击：', param) // 输出：子组件触发了点击：我是子组件传递的参数
    }
  }
}
</script>

<template>
  <button @click="handleClick">{{ label }}</button>
</template>

<script setup>
// 1. 导入Vue API（无需注册，直接使用）
import { defineProps, defineEmits } from 'vue'

// 2. 定义Props（替代原props选项）
const props = defineProps({
  label: { type: String, required: true }
})

// 3. 定义Emit（替代原emits选项）
const emit = defineEmits(['btn-click']) // 声明要触发的事件名

// 4. 定义方法（直接写，无需methods选项）
const handleClick = () => {
  emit('btn-click') // 触发事件
}
</script>

<script setup>
import CustomButton from './Button.vue' // 导入即注册
</script>

<template>
  <CustomButton label="自动注册的组件" /> <!-- 直接使用 -->
</template>

<style scoped>
/* 仅作用于当前组件的.button类 */
.button {
  color: #42b983;
}
</style>

<!-- 父组件：Parent.vue -->
<style scoped>
/* 修改子组件CustomButton的背景色 */
:deep(.custom-btn) {
  background: #ff5722;
}
</style>

<template>
  <div class="pagination">
    <button @click="prevPage" :disabled="currentPage === 1">上一页</button>
    <span>{{ currentPage }} / {{ totalPages }}</span>
    <button @click="nextPage" :disabled="currentPage === totalPages">下一页</button>
  </div>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue'

const props = defineProps({
  currentPage: { type: Number, default: 1 },
  totalPages: { type: Number, required: true }
})

const emit = defineEmits(['page-change'])

const prevPage = () => {
  if (props.currentPage > 1) {
    emit('page-change', props.currentPage - 1)
  }
}

const nextPage = () => {
  if (props.currentPage < props.totalPages) {
    emit('page-change', props.currentPage + 1)
  }
}
</script>

<script setup>
// 懒加载组件（仅在需要时加载）
const LargeReport = defineAsyncComponent(() => import('./LargeReport.vue'))
</script>

<template>
  <div v-if="showReport">
    <LargeReport />
  </div>
</template>

<template>
  <div class="tabs">
    <button @click="currentTab = 'Home'">首页</button>
    <button @click="currentTab = 'About'">关于我们</button>
    <component :is="currentTab" /> <!-- 动态渲染组件 -->
  </div>
</template>

<script setup>
import { ref } from 'vue'
import Home from './Home.vue'
import About from './About.vue'

const currentTab = ref('Home') // 初始显示Home组件
</script>