【VUE】Vue 组件详解

📝个人主页🌹：个人主页
⏩收录专栏⏪：VUE
🌹🌹期待您的关注 🌹🌹，让我们共同进步！

一、Vue 组件的基础概念

1.1 什么是组件？

在 Vue 中，组件是可复用的 UI
片段，它封装了特定的功能和外观。可以将组件视为独立的小模块，每个组件负责一部分特定的任务，比如显示一个按钮、一个表单或者一个复杂的页面布局。

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 应用。在实际开发中，根据项目的需求合理地组织和使用组件，将大大提高开发效率和代码质量。