极简主义： Vue组件详解

2024-01-04 21:31:24

Vue组件概述

Vue组件是构建Vue应用程序的基础单元。它是一个可复用的代码块，可以独立运行，具有自己的模板、样式和逻辑。组件可以被多次使用，从而减少代码重复并提高开发效率。

组件注册

全局注册

全局注册的组件可以在任何Vue实例中使用。通常在main.js文件中进行全局注册。例如：

Vue.component('my-component', {
  template: '<p>Hello, world!</p>'
});

局部注册

局部注册的组件只能在注册它的Vue实例中使用。通常在组件所在的Vue文件中进行局部注册。例如：

export default {
  components: {
    'my-component': {
      template: '<p>Hello, world!</p>'
    }
  }
};

数据传递

子组件可以通过props属性接收父组件传递的数据。例如：

<!-- 父组件 -->
<my-component :message="message"></my-component>

<!-- 子组件 -->
<template>
  <p>{{ message }}</p>
</template>

export default {
  props: ['message']
};

事件处理

子组件可以通过$emit方法触发事件，父组件可以通过v-on指令监听这些事件。例如：

<!-- 子组件 -->
<template>
  <button @click="$emit('my-event')">Click me!</button>
</template>

export default {
  methods: {
    handleClick() {
      this.$emit('my-event');
    }
  }
};

<!-- 父组件 -->
<my-component @my-event="handleMyEvent"></my-component>

export default {
  methods: {
    handleMyEvent() {
      // 做一些事情
    }
  }
};

插槽

插槽允许父组件向子组件传递内容。例如：

<!-- 父组件 -->
<my-component>
  <template v-slot:default>
    Hello, world!
  </template>
</my-component>

<!-- 子组件 -->
<template>
  <div>
    <slot name="default"></slot>
  </div>
</template>

export default {
  name: 'MyComponent'
};