当前位置：首页 > VUE

vue组件如何实现

2026-01-19 03:03:29VUE

Vue 组件实现方法

Vue 组件可以通过多种方式实现，以下是常见的几种方法：

单文件组件 (SFC) 使用 .vue 文件格式，包含模板、脚本和样式三部分：

<template>
  <div class="example">{{ msg }}</div>
</template>

<script>
export default {
  data() {
    return {
      msg: 'Hello Vue!'
    }
  }
}
</script>

<style scoped>
.example {
  color: red;
}
</style>

选项式 API 使用传统的选项对象定义组件：

Vue.component('example-component', {
  template: '<div>{{ message }}</div>',
  data() {
    return {
      message: 'Hello Vue!'
    }
  }
})

组合式 API 使用 setup() 函数（Vue 3+）：

import { ref } from 'vue'

export default {
  setup() {
    const count = ref(0)
    return { count }
  },
  template: '<button @click="count++">{{ count }}</button>'
}

组件注册方式

全局注册

Vue.component('my-component', {
  // 选项
})

局部注册

const ComponentA = { /* ... */ }
const ComponentB = { /* ... */ }

new Vue({
  el: '#app',
  components: {
    'component-a': ComponentA,
    'component-b': ComponentB
  }
})

组件通信方式

Props 向下传递

Vue.component('child', {
  props: ['message'],
  template: '<span>{{ message }}</span>'
})

事件向上传递

Vue.component('child', {
  methods: {
    sendMessage() {
      this.$emit('message', 'Hello from child')
    }
  }
})

使用 provide/inject

// 父组件
export default {
  provide() {
    return {
      theme: 'dark'
    }
  }
}

// 子组件
export default {
  inject: ['theme']
}

动态组件实现

使用 <component> 元素配合 is 特性：

vue组件如何实现

<template>
  <component :is="currentComponent"></component>
</template>

<script>
import ComponentA from './ComponentA.vue'
import ComponentB from './ComponentB.vue'

export default {
  data() {
    return {
      currentComponent: 'ComponentA'
    }
  },
  components: { ComponentA, ComponentB }
}
</script>