Vue开发之基础组件介绍

在 Vue.js 开发中，组件是构建用户界面的核心概念。组件可以被认为是自定义的 HTML 元素，具有其自己的逻辑和样式。通过组件化开发，你可以提高代码复用性、可维护性和可测试性。下面是 Vue.js 中一些基础组件的介绍和使用示例。

什么是组件
Vue 组件是一个包含模板（template）、逻辑（script）和样式（style）的独立单元。每个组件都有自己的作用域，可以通过 props 接收外部数据，通过事件与父组件通信。

创建组件
单文件组件（Single File Component）
Vue 推荐使用单文件组件（.vue 文件），因为它们允许你将模板、逻辑和样式写在同一个文件中，便于管理和维护。

<!-- MyComponent.vue -->
<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  name: 'MyComponent',
  props: {
    title: {
      type: String,
      required: true,
    },
    message: {
      type: String,
      required: true,
    },
  },
};
</script>

<style scoped>
h1 {
  color: blue;
}
</style>

在上面的示例中，我们创建了一个名为 MyComponent 的组件，它接收两个 props：title 和 message。

使用组件
全局注册

你可以在应用的入口文件（如 main.js）中全局注册组件：javascript

import { createApp } from 'vue';
import App from './App.vue';
import MyComponent from './components/MyComponent.vue';

const app = createApp(App);
app.component('MyComponent', MyComponent);
app.mount('#app');

局部注册

你也可以在某个父组件中局部注册组件：

<!-- ParentComponent.vue -->
<template>
  <div>
    <MyComponent title="Hello" message="This is a message"></MyComponent>
  </div>
</template>

<script>
import MyComponent from './MyComponent.vue';

export default {
  components: {
    MyComponent,
  },
};
</script>

组件之间的通信
Props

父组件可以通过 props 向子组件传递数据：

<!-- ParentComponent.vue -->
<template>
  <div>
    <MyComponent title="Welcome" message="This is a simple message"></MyComponent>
  </div>
</template>

自定义事件

子组件可以通过 $emit 向父组件发送事件：

<!-- ChildComponent.vue -->
<template>
  <button @click="notifyParent">Click me</button>
</template>

<script>
export default {
  name: 'ChildComponent',
  methods: {
    notifyParent() {
      this.$emit('notify', 'Hello from child');
    },
  },
};
</script>

父组件监听子组件的事件：

<!-- ParentComponent.vue -->
<template>
  <div>
    <ChildComponent @notify="handleNotification"></ChildComponent>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent,
  },
  methods: {
    handleNotification(message) {
      console.log(message);
    },
  },
};
</script>

插槽（Slots）
插槽允许你在子组件中插入内容：

<!-- ParentComponent.vue -->
<template>
  <div>
    <MyComponent>
      <template v-slot:header>
        <h1>Custom Header</h1>
      </template>
      <p>This is some default content.</p>
    </MyComponent>
  </div>
</template>

<script>
import MyComponent from './MyComponent.vue';

export default {
  components: {
    MyComponent,
  },
};
</script>
<!-- MyComponent.vue -->
<template>
  <div>
    <slot name="header"></slot>
    <slot></slot>
  </div>
</template>

生命周期钩子
Vue 组件有一系列生命周期钩子，可以在创建、挂载、更新和销毁时执行特定的代码：

javascript

export default {
  name: 'MyComponent',
  created() {
    console.log('Component created');
  },
  mounted() {
    console.log('Component mounted');
  },
  updated() {
    console.log('Component updated');
  },
  beforeUnmount() {
    console.log('Component is about to be unmounted');
  },
};

结论
组件是 Vue.js 最强大的特性之一，通过组件可以有效地构建和维护复杂的用户界面。掌握组件的基本用法和高级特性，对于开发高效、可维护的 Vue 应用至关重要。你可以在 Vue 官方文档 中找到更多详细的信息和示例。