Vue3知识地图五 组件相关语法

组件的基本概念

组件是 Vue3 应用程序中的一种基本构建块，是一个可重用的代码块，提供特定功能或页面元素。它将相关 HTML、CSS 和 JavaScript 组合成一个可重用的、独立的部分，可以与其他组件组合使用，形成复杂的用户界面。Vue 官方提供了全局组件和局部组件两种配置方式，下面是两种方法的代码示例：

// 全局组件
const app = Vue.createApp({});
app.component('my-greeting', {
  props: ['name'],
  template: '
Hello, {{name}}!
'
});
const vm = app.mount('#app');

// 局部组件
const app = Vue.createApp({});
const MyGreeting = {
  props: ['name'],
  template: '
Hello, {{name}}!
'
};
const vm = app.mount('#app');

组件的传值

组件之间的通信是 Vue 应用程序中的一个基本需求，一种解决方案是通过 prop 传递数据。prop 是父组件向子组件传递数据的一种方式，子组件通过 props 选项来声明接收哪些 prop，下面是一个简单的例子：

// 父组件
const app = Vue.createApp({});
app.component('my-greeting', {
  props: {
    name: {
      type: String,
      default: 'World'
    }
  },
  template: '
Hello, {{name}}!
'
});
const vm = app.mount('#app');

子组件中通过 props 来声明需要哪些数据，父组件可以通过传入相应的值来设置子组件的 prop 值，下面是一个简单的例子：

// 子组件
const app = Vue.createApp({});
app.component('child-component', {
  props: ['message'],
  template: '
{{ message }}
'
});
// 父组件
const vm = app.mount('#app');

组件的局部注册和全局注册

在 Vue3 中，组件可以在全局范围内或在单个组件中进行注册。全局注册的组件可以在整个应用程序中使用，而局部注册的组件只能在当前组件和它的子组件中使用。下面是两种方式的代码示例：

// 全局注册
const app = Vue.createApp({});
app.component('my-greeting', {
  props: ['name'],
  template: '
Hello, {{name}}!
'
});
const vm = app.mount('#app');

// 局部注册
const app = Vue.createApp({});
const MyGreeting = {
  props: ['name'],
  template: '
Hello, {{name}}!
'
};
const vm = app.mount('#app');

组件的生命周期钩子函数

在 Vue3 中，组件有一些特定的生命周期钩子函数，用于控制组件的生命周期。这些钩子函数可以分为三类：创建钩子函数、更新钩子函数和销毁钩子函数。下面是一些常用的钩子函数代码示例：

// 创建钩子函数
app.component('my-component', {
  // 在组件被创建时调用
  created() {
    console.log('Component created.');
  }
});

// 更新钩子函数
app.component('my-component', {
  // 在组件更新时调用
  updated() {
    console.log('Component updated.');
  }
});

// 销毁钩子函数
app.component('my-component', {
  // 在组件被销毁时调用
  beforeUnmount() {
    console.log('Component about to be destroyed.');
  }
});