Vue 中组件和插件的区别与实现详解

Vue 中组件和插件的区别与实现详解

一、Vue 组件

Vue 组件是用于封装 UI 逻辑的可复用单元，它可以接收数据（通过 props），并触发事件（通过 $emit）与父组件进行交互。组件的核心在于其独立性和可复用性。

1. 组件的定义

组件可以全局或局部注册。全局组件在应用的任何地方都可以使用，局部组件只能在特定的父组件中使用。

// 全局组件注册
Vue.component('my-component', {
   
  props: ['message'],
  template: '<div>{
   { message }}</div>',
});

// 局部组件注册
export default {
   
  components: {
   
    'my-local-component': {
   
      props: ['message'],
      template: '<div>{
   { message }}</div>',
    },
  },
};

2. 父子组件之间的通信

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

// 父组件
<my-component message="Hello from parent!"></my-component>