当前位置：首页 > VUE

vue怎么把组件实现

2026-02-21 13:06:35VUE

Vue 组件实现方法

组件定义

在 Vue 中，组件是可复用的 Vue 实例。通过 Vue.component 或单文件组件（.vue 文件）定义。

全局组件注册：

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

局部组件注册：

const ComponentA = { 
  template: '<div>Component A</div>' 
}
new Vue({
  el: '#app',
  components: { 'component-a': ComponentA }
})

单文件组件

创建 .vue 文件，包含模板、脚本和样式：

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

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

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

组件通信

父组件通过 props 传递数据给子组件：

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

// 使用
<child message="hello!"></child>

子组件通过事件向父组件通信：

// 子组件
this.$emit('notify', data)

// 父组件
<child @notify="handleNotify"></child>

动态组件

使用 <component> 元素配合 is 特性实现动态组件切换：

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

插槽内容分发

通过 <slot> 元素实现内容分发：

<!-- 组件模板 -->
<div class="container">
  <slot></slot>
</div>

<!-- 使用 -->
<my-component>
  <p>插入的内容</p>
</my-component>

生命周期钩子

组件有创建、挂载、更新和销毁等生命周期阶段，可在不同阶段执行逻辑：

export default {
  created() {
    // 实例创建后调用
  },
  mounted() {
    // DOM挂载后调用
  }
}

组件复用

通过 mixins 复用组件逻辑：

const myMixin = {
  created() {
    this.hello()
  },
  methods: {
    hello() {
      console.log('hello from mixin!')
    }
  }
}

// 使用
const Component = Vue.extend({
  mixins: [myMixin]
})

vue怎么把组件实现