当前位置：首页 > VUE

vue如何实现封装

2026-02-20 11:09:42VUE

Vue 组件封装方法

封装 Vue 组件可以提高代码复用性和可维护性。以下是常见的封装方法：

使用 props 传递数据 父组件通过 props 向子组件传递数据，子组件通过 defineProps 接收。

<!-- 子组件 Child.vue -->
<script setup>
defineProps({
  title: String
})
</script>

<template>
  <h2>{{ title }}</h2>
</template>

<!-- 父组件 -->
<Child title="封装示例" />

通过插槽分发内容 使用 slot 可以让父组件向子组件插入自定义内容。

<!-- 子组件 -->
<template>
  <div class="card">
    <slot name="header"></slot>
    <slot></slot>
  </div>
</template>

<!-- 父组件 -->
<Child>
  <template #header>
    <h3>自定义标题</h3>
  </template>
  <p>自定义内容</p>
</Child>

使用 emit 触发事件 子组件通过 defineEmits 定义事件，父组件监听这些事件。

<!-- 子组件 -->
<script setup>
defineEmits(['submit'])
</script>

<template>
  <button @click="$emit('submit')">提交</button>
</template>

<!-- 父组件 -->
<Child @submit="handleSubmit" />

使用 provide/inject 跨层级通信 祖先组件通过 provide 提供数据，后代组件通过 inject 注入数据。

<!-- 祖先组件 -->
<script setup>
import { provide } from 'vue'
provide('theme', 'dark')
</script>

<!-- 后代组件 -->
<script setup>
import { inject } from 'vue'
const theme = inject('theme')
</script>

使用 v-model 实现双向绑定 通过 modelValue 和 update:modelValue 实现自定义组件的双向绑定。

<!-- 子组件 -->
<script setup>
defineProps(['modelValue'])
defineEmits(['update:modelValue'])
</script>

<template>
  <input 
    :value="modelValue"
    @input="$emit('update:modelValue', $event.target.value)"
  />
</template>

<!-- 父组件 -->
<Child v-model="message" />

组合式函数封装 将可复用的逻辑抽取为组合式函数。

// useCounter.js
import { ref } from 'vue'

export function useCounter(initialValue = 0) {
  const count = ref(initialValue)

  function increment() {
    count.value++
  }

  return { count, increment }
}

<script setup>
import { useCounter } from './useCounter'
const { count, increment } = useCounter()
</script>

渲染函数封装 使用渲染函数创建更灵活的组件。

<script>
import { h } from 'vue'

export default {
  render() {
    return h('div', { class: 'custom' }, [
      h('p', '渲染函数示例')
    ])
  }
}
</script>