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