Vue组件化开发三

组件复用与模块化

在 Vue 中，组件化开发是实现代码复用和模块化的核心方法。通过组件化，我们可以将不同的功能模块封装成独立的组件，并在不同的地方复用。这样可以减少重复代码，提高开发效率，并增强项目的可维护性。

可复用性

通过封装HTML、CSS和逻辑实现组件复用

组件的核心思想之一就是封装，它将模板（HTML）、样式（CSS）、逻辑（JavaScript）封装在一个单独的文件中。这种封装可以使得组件在不同地方复用而不影响其他部分的功能。

举个例子，如果你要实现一个 按钮组件，你可以把按钮的模板、样式和事件逻辑封装在一个组件里，然后在其他页面中复用。

按钮组件（Button.vue） ：

vue 复制代码

<template>
  <button :class="['btn', type]" @click="handleClick">{{ label }}</button>
</template>

<script>
export default {
  props: {
    label: {
      type: String,
      required: true
    },
    type: {
      type: String,
      default: 'primary'
    }
  },
  methods: {
    handleClick() {
      this.$emit('click');
    }
  }
};
</script>

<style scoped>
.btn {
  padding: 10px 20px;
  font-size: 16px;
  border-radius: 5px;
  cursor: pointer;
}

.primary {
  background-color: #42b983;
  color: white;
}

.secondary {
  background-color: gray;
  color: white;
}
</style>

在这个例子中：

HTML：通过模板定义了按钮的结构。
CSS ：为按钮添加了样式，并通过 scoped 作用域限制样式只影响当前组件。
JavaScript ：定义了组件的 props，允许父组件传递数据，还定义了 handleClick 方法来处理按钮点击事件。

可以在多个地方使用这个按钮组件，例如：

vue 复制代码

<template>
  <div>
    <button-component label="Click Me" @click="handleClick" />
  </div>
</template>

<script>
import ButtonComponent from './Button.vue';

export default {
  components: {
    ButtonComponent
  },
  methods: {
    handleClick() {
      alert('Button clicked!');
    }
  }
};
</script>

单文件组件（SFC）

Vue组件的常用写法是单文件组件，它使用.vue扩展名，将模板、脚本和样式封装在一文件中，通过这种方式，可以让每一个组件在同一个文件里组织得更加清晰和易于维护

单文件组件的结构如下：

vue 复制代码

<template>
  <!-- HTML 模板 -->
</template>

<script>
  // JS 逻辑（data, methods, computed, lifecycle hooks）
</script>

<style scoped>
  /* CSS 样式 */
</style>

Vue 提供了单文件组件支持，可以通过 Vue CLI 等工具来管理这些组件，方便进行开发和打包。

高级特性

动态组件

通过 <component :is="组件名"> 切换组件。

动态组件允许根据应用的状态动态地切换组件。通过v-bind:is或:is动态绑定组件名，可以实现组件的动态切换

vue 复制代码

<template>
  <div>
    <button @click="currentComponent = 'A'">Show Component A</button>
    <button @click="currentComponent = 'B'">Show Component B</button>
    <component :is="currentComponent"></component>
  </div>
</template>

<script>
import ComponentA from './ComponentA.vue';
import ComponentB from './ComponentB.vue';

export default {
  data() {
    return {
      currentComponent: 'A' // 默认加载 A 组件
    };
  },
  components: {
    A: ComponentA,
    B: ComponentB
  }
};
</script>

在这个例子中：

currentComponent 用来控制当前显示的组件。
component :is="currentComponent" 会根据 currentComponent 的值动态加载对应的组件。
你可以通过按钮点击切换不同的组件，动态渲染不同的内容。

注意： is 属性必须是一个有效的组件名称，或者是一个指向组件的对象。

异步组件

结合import()实现按需加载

在大型应用中，一开始加载所有的组件可能会影响页面的加载性能。Vue支持异步组件的加载，可以在需要时才加载组件，避免一次性加载过多资源。结合import()函数，你可以实现按需加载组件

示例：

vue 复制代码

<template>
  <div>
    <button @click="loadComponent">Load Async Component</button>
    <async-component v-if="showComponent" />
  </div>
</template>

<script>
// 使用 import() 动态加载组件
export default {
  data() {
    return {
      showComponent: false
    };
  },
  components: {
    asyncComponent: () => import('./AsyncComponent.vue')
  },
  methods: {
    loadComponent() {
      this.showComponent = true; // 点击按钮后异步加载组件
    }
  }
};
</script>

在这个例子中：

import('./AsyncComponent.vue') 用于动态引入 AsyncComponent.vue 组件，组件只会在用户点击按钮后加载。
v-if="showComponent" 控制组件是否显示，只有在点击按钮后才会显示并加载。

这种方式对于减少初始加载的资源非常有用，尤其是当某些组件只有在特定条件下才需要渲染时。