vue组件如何是实现

Vue 组件实现方法

Vue 组件是 Vue.js 的核心特性之一，允许将 UI 拆分为独立、可复用的模块。以下是实现 Vue 组件的几种常见方法。

单文件组件 (SFC)

单文件组件是 Vue 中最常用的组件形式，将模板、逻辑和样式封装在一个 .vue 文件中。

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

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

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

全局注册组件

通过 Vue.component 方法全局注册组件，可在任何地方使用。

Vue.component('my-component', {
  template: '<div>A custom component!</div>'
})

局部注册组件

在父组件中通过 components 选项局部注册组件，仅在该父组件中可用。

const ChildComponent = {
  template: '<div>Child Component</div>'
}

new Vue({
  el: '#app',
  components: {
    'child-component': ChildComponent
  }
})

动态组件

使用 <component> 标签和 is 属性实现动态组件切换。

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

<script>
export default {
  data() {
    return {
      currentComponent: 'component-a'
    }
  },
  components: {
    'component-a': { template: '<div>Component A</div>' },
    'component-b': { template: '<div>Component B</div>' }
  }
}
</script>

函数式组件

适用于无状态、无实例的组件，性能更高。

Vue.component('functional-button', {
  functional: true,
  render(createElement, context) {
    return createElement('button', context.data, context.children)
  }
})

组件通信

• Props 向下传递数据

<template>
  <child-component :message="parentMessage"></child-component>
</template>

<script>
export default {
  data() {
    return {
      parentMessage: 'Message from parent'
    }
  }
}
</script>

• Events 向上传递消息

<template>
  <button @click="$emit('custom-event', payload)">Click me</button>
</template>

• Provide/Inject 跨层级通信

// 父组件
export default {
  provide() {
    return {
      sharedData: this.sharedData
    }
  }
}

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

插槽 (Slots)

允许父组件向子组件插入内容。

<!-- 子组件 -->
<template>
  <div>
    <slot></slot>
  </div>
</template>

<!-- 父组件 -->
<child-component>
  <p>Content inserted into slot</p>
</child-component>

作用域插槽

子组件向插槽传递数据。

<!-- 子组件 -->
<template>
  <div>
    <slot :user="user"></slot>
  </div>
</template>

<!-- 父组件 -->
<child-component>
  <template v-slot:default="slotProps">
    {{ slotProps.user.name }}
  </template>
</child-component>

生命周期钩子

组件在不同阶段触发特定逻辑。

export default {
  created() {
    console.log('Component created')
  },
  mounted() {
    console.log('Component mounted')
  }
}