【VUE】Vue 组件详解

大家好，欢迎来到IT知识分享网。

一、Vue 组件的基础概念

1.1 什么是组件？

1.2 组件的作用

• 提高可维护性：将应用拆分成多个小的组件，使得每个组件的功能相对单一，易于理解和修改。当应用的某个部分出现问题时，可以快速定位到相应的组件进行修复。
• 可复用性：一旦创建了一个组件，可以在不同的地方重复使用，减少代码重复。例如，一个通用的输入框组件可以在多个页面中使用。
• 团队协作：不同的开发人员可以同时开发不同的组件，提高开发效率。

1.3 组件组件的本质

组件的本质是一个带有 template​、script​ 和 style​ 的自包含模块：

• ​template​​：定义了组件的结构和内容。
  ​- script​​：包含组件的逻辑，如数据、方法和生命周期钩子。
  ​- style​​：定义了组件的样式，可以使用 Scoped CSS 来确保样式仅作用于当前组件。
  
  

1.4 组件的分类（全局组件 vs 局部组件）

全局组件：
在整个应用中都可以使用的组件。通过在 Vue 实例创建之前使用 Vue.component() 方法进行注册。例如：
javascript

Vue.component('MyGlobalComponent', { 
    template: '<div>Global Component</div>' }); 

局部组件：
只在特定的组件内部使用的组件。在组件的选项中通过 components 属性进行注册。例如：
javascript

const App = { components: { 'MyLocalComponent': { template: '<div>Local Component</div>' } } }; 

二、创建和注册组件

2.1 单文件组件（SFC）

单文件组件是 Vue 中推荐的组件编写方式，它将一个组件的模板、脚本和样式写在一个以 .vue 为后缀的文件中。例如：

<template> <div> <h1>{ 
  { message }}</h1> </div> </template> <script> export default { 
      data() { 
      return { 
      message: 'Hello from SFC!' }; } }; </script> <style scoped> h1 { 
      color: blue; } </style> 

2.2 全局组件注册

如前所述，使用 Vue.component() 方法进行全局注册。例如：

import MyGlobalComponent from './MyGlobalComponent.vue'; Vue.component('MyGlobalComponent', MyGlobalComponent); 

2.3 局部组件注册

在父组件的选项中通过 components 属性进行注册。例如：

import MyLocalComponent from './MyLocalComponent.vue'; const App = { 
    components: { 
    'MyLocalComponent': MyLocalComponent } }; 

三、组件命名格式

组件的命名可以使用驼峰式命名法或短横线分隔命名法。在注册组件时，需要保持命名的一致性。例如：

// 驼峰式命名 const MyComponent = { 
    /*... */ }; Vue.component('MyComponent', MyComponent); // 短横线分隔命名 const my-component = { 
    /*... */ }; Vue.component('my-component', my-component); 

四、ref 获取 DOM 元素

4.1 基本流程

在 Vue 中，可以使用 ref 属性来获取 DOM 元素或组件实例。首先，在模板中给元素或组件添加 ref 属性。例如：

<template> <div> <input ref="myInput" /> </div> </template> 

然后，在脚本中可以通过 this.$refs 来访问这个元素或组件。

4.2 获取组件引用

同样可以使用 ref 属性来获取子组件的引用。例如：

<template> <div> <child-component ref="myChildComponent" /> </div> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { 
      components: { 
      ChildComponent }, mounted() { 
      console.log(this.$refs.myChildComponent); } }; </script> 

五、ref 操作组件 – defineExpose

5.1 defineExpose 的作用

在默认情况下，通过 ref 获取到的子组件实例只能访问子组件中通过 defineExpose 暴露出来的属性和方法。

5.2 使用 defineExpose 暴露组件内部属性和方法

在子组件中，使用 defineExpose 来指定哪些属性和方法可以被外部访问。例如：

<template> <div> <h1>{ 
  { message }}</h1> <button @click="changeMessage">Change Message</button> </div> </template> <script> import { 
      defineExpose } from 'vue'; export default { 
      data() { 
      return { 
      message: 'Initial message', }; }, methods: { 
      changeMessage() { 
      this.message = 'Updated message'; }, }, expose: ['message', 'changeMessage'] // 或者使用 defineExpose 函数 }; </script> 

在父组件中，可以通过 ref 获取子组件实例，并调用暴露出来的方法和访问属性。例如：

<template> <div> <child-component ref="myChild" /> <button @click="updateChildMessage">Update Child Message</button> </div> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { 
      components: { 
      ChildComponent }, methods: { 
      updateChildMessage() { 
      this.$refs.myChild.changeMessage(); console.log(this.$refs.myChild.message); } } }; </script> 

六、总结

Vue 组件是构建强大和可维护应用的关键。通过理解组件的基础概念、掌握创建和注册组件的方法，以及利用 ref 和 defineExpose 等特性，可以更加高效地开发 Vue 应用。在实际开发中，根据项目的需求合理地组织和使用组件，将大大提高开发效率和代码质量。