vue组件

Vue 组件是 Vue.js 应用程序的基本构建块。它们是可复用的 Vue 实例，带有预定义的选项。组件系统让开发者可以通过小型、独立和可复用的单元来构建大型应用。每个 Vue 组件都包含了自己的模板（HTML）、逻辑（JavaScript）和样式（CSS），这些元素封装在一起，形成了一个可复用的单元。

创建 Vue 组件

Vue 组件通常使用 .vue 文件格式来定义，这种文件格式是 Vue 的单文件组件（Single-File Components）系统的基础。一个 .vue 文件包含了三个部分：

1. 模板（template）：定义了组件的 HTML 结构。
2. 脚本（script）：包含了组件的 JavaScript 逻辑，比如数据、计算属性、方法等。
3. 样式（style）：定义了组件的 CSS 样式。

示例

下面是一个简单的 Vue 组件示例，该组件用于显示一个欢迎信息：

<template>  
  <div class="hello">  
    <h1>{{ msg }}</h1>  
    <button @click="greet">点击我</button>  
  </div>  
</template>  
  
<script>  
export default {  
  name: 'HelloWorld',  
  props: {  
    msg: String  
  },  
  methods: {  
    greet() {  
      alert('Hello, Vue!');  
    }  
  }  
}  
</script>  
  
<!-- Add "scoped" attribute to limit CSS to this component only -->  
<style scoped>  
h1 {  
  color: #42b983;  
}  
</style>

使用 Vue 组件

要在 Vue 应用中使用组件，你需要先注册它。注册方式有两种：全局注册和局部注册。

• 全局注册：注册后的组件可以在新创建的 Vue 根实例的模板中以及所有子组件的模板中使用。

Vue.component('hello-world', {  
  // 选项...  
});

• 局部注册：在组件的 components 选项中注册，注册的组件只能在该组件及其子组件中使用。

new Vue({  
  el: '#app',  
  components: {  
    'hello-world': HelloWorld  
  }  
});

 

组件通信

Vue 组件之间的通信可以通过多种方式进行，包括：

• props：父组件向子组件传递数据。
• 自定义事件：子组件向父组件发送消息。
• 插槽（slot）：允许父组件在子组件模板中插入 HTML 内容。
• 全局状态管理（如 Vuex）：在大型应用中管理多个组件间的共享状态。

Vue 组件系统使得构建大型、可维护的应用程序变得更加容易和高效。