Vue 3组件详解

一、组件的基本概念

Vue 3是一个渐进式JavaScript框架，其中最核心的概念之一就是组件。所谓组件，就是一个封装了自己的HTML、CSS和JS的独立单元，可以通过组合不同的组件，搭建出更加复杂的页面。组件可以传递参数、接收事件和响应状态变化等操作，使得前端开发更加高效和模块化。

二、组件的创建

Vue 3提供了两种方式来创建组件。

1.基于对象的组件

const MyComponent = {
  template: '<div>My Component</div>'
}

基于对象的组件是最简单的形式，只需要定义一个包含template属性的对象即可。在上述代码中，我们创建了一个名为MyComponent的组件，模板中只包含了一个div元素和一段文本。这个组件可以在Vue实例中通过components属性进行注册，然后在模板中使用。

2.基于选项的组件

Vue.component('my-component', {
  template: '<div>My Component</div>'
})

除了基于对象的组件外，Vue 3还提供了基于选项的组件创建方式。其中，Vue.component方法用来注册全局组件，这种组件可以在应用的任何地方使用。组件名称要使用kebab-case命名方式，同时，在模板中使用组件时，可以使用 标签进行引用。

三、组件的通信

组件之间的数据传递和通信是Vue 3中非常重要的一个概念，常用的方式包括：props、事件和$emit。

1.props

const ParentComponent = {
  template: '<div><child-component :message="myMessage" /></div>',
  data() {
    return {
      myMessage: 'Hello World'
    }
  },
  components: {
    ChildComponent
  }
}

const ChildComponent = {
  props: ['message'],
  template: '<div>{{ message }}</div>'
}

上述代码中，我们通过props属性将父组件数据（myMessage）传递给了子组件。在子组件中，可以通过props属性来接收传递过来的数据，然后在模板中进行渲染。

2.$emit

const ChildComponent = {
  template: '<button @click="$emit(\'my-event\')">click me</button>'
}

const ParentComponent = {
  template: '<div><child-component @my-event="handleClick" /></div>',
  methods: {
    handleClick() {
      console.log('button clicked')
    }
  },
  components: {
    ChildComponent
  }
}

在上述代码中，我们在子组件中绑定了一个点击事件，并通过$emit方法触发了一个名为my-event的自定义事件。在父组件中，通过@符号绑定了这个自定义事件，并定义了一个handleClick方法进行响应。当子组件中的按钮被点击时，my-event自定义事件会触发，从而触发了handleClick方法。

四、组件的生命周期

组件的生命周期是Vue 3中非常关键的概念。生命周期钩子函数可以帮助我们在不同阶段控制组件行为，常用的生命周期钩子函数包括：mounted、updated、beforeDestroy等。

1.mounted

const MyComponent = {
  template: '<div>Hello World</div>',
  mounted() {
    console.log('mounted')
  }
}

在上述代码中，我们通过mounted生命周期钩子函数定义了组件在挂载之后要执行的逻辑。在控制台中输出了一个'mounted'的字符串。

2.updated

const MyComponent = {
  template: '<div @click="updateMessage">{{ message }}</div>',
  data() {
    return {
      message: 'Hello World'
    }
  },
  methods: {
    updateMessage() {
      this.message = 'Hello Vue 3'
    }
  },
  updated() {
    console.log('updated')
  }
}

在上述代码中，我们定义了一个点击事件updateMessage，在点击元素后，会修改message的值。在数据更新之后，通过updated生命周期钩子函数输出了一个'updated'的字符串。

3.beforeDestroy

const MyComponent = {
  template: '<div>Hello World</div>',
  beforeDestroy() {
    console.log('destroyed')
  }
}

在上述代码中，我们通过beforeDestroy生命周期钩子函数定义了组件在销毁之前要执行的逻辑。在控制台中输出了一个'destroyed'的字符串。

五、组件的复用

Vue 3中，我们可以通过mixin和extends等方式来实现组件的复用。

1.mixin

const myMixin = {
  methods: {
    hello() {
      console.log('Hello World')
    }
  }
}

const MyComponent = {
  mixins: [myMixin],
  template: '<div>{{ hello() }}</div>'
}

在上述代码中，我们定义了一个名为myMixin的mixin对象，其中定义了一个hello方法。在MyComponent组件中，通过mixins属性引入了myMixinMixin，然后在模板中使用hello方法进行渲染。这样一来，我们就可以通过mixin来实现方法的共享和复用。

2.extends

const MyBaseComponent = {
  template: '<div>Base Component</div>'
}

const MyComponent = {
  extends: MyBaseComponent,
  template: '<div>{{ message }}</div>',
  data() {
    return {
      message: 'Extended Component'
    }
  }
}

在上述代码中，我们定义了一个名为MyBaseComponent的基础组件，在MyComponent组件中通过extends属性来继承基础组件，并重新定义了模板内容和数据。这样一来，我们就可以通过extends属性来实现组件的复用和继承。