详解Vue中公共组件的封装

更新时间：2023年08月04日 08:23:20 作者：一花一world

在Vue中，组件是构建用户界面的基本单位，封装公共组件是一种良好的实践，可以提高代码的可复用性和可维护性，下面我们就来看看如何封装一个公共的按钮组件吧

<template>
  <button :class="classes" @click="onClick">
    <slot></slot>
  </button>
</template>
<script>
export default {
  name: 'Button',
  props: {
    type: {
      type: String,
      default: 'default'
    },
    size: {
      type: String,
      default: 'medium'
    }
  },
  computed: {
    classes() {
      return ['button', `button-${this.type}`, `button-${this.size}`];
    }
  },
  methods: {
    onClick() {
      this.$emit('click');
    }
  }
};
</script>
<style scoped>
.button {
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
}
.button-default {
  background-color: #ccc;
  color: #333;
}
.button-primary {
  background-color: #007bff;
  color: #fff;
}
.button-success {
  background-color: #28a745;
  color: #fff;
}
.button-danger {
  background-color: #dc3545;
  color: #fff;
}
.button-small {
  font-size: 12px;
}
.button-medium {
  font-size: 14px;
}
.button-large {
  font-size: 16px;
}
</style>

在上面的代码中，我们定义了一个名为Button的Vue组件。该组件接受两个属性：type和size，分别表示按钮的样式和尺寸。默认情况下，按钮的样式是default，尺寸是medium。

在模板中，我们使用:class绑定动态类，根据type和size属性来设置按钮的样式类。使用@click绑定点击事件，并使用<slot>插槽来允许在按钮中插入自定义内容。

在计算属性classes中，我们根据属性值动态生成类名数组。按钮的样式类由button和button-${this.type}组成，尺寸类由button-${this.size}组成。

在方法onClick中，我们触发一个自定义事件click，以便在使用该组件的地方可以监听按钮的点击事件。

最后，在样式中，我们定义了按钮的基本样式和不同样式的类。

现在，我们可以在其他Vue组件中使用这个公共按钮组件。例如，假设我们有一个名为App.vue的根组件，我们可以在模板中使用<Button>标签来使用按钮组件：

<template>
  <div>
    <Button type="primary" size="large" @click="handleClick">Click me</Button>
  </div>
</template>
<script>
import Button from './Button.vue';
export default {
  name: 'App',
  components: {
    Button
  },
  methods: {
    handleClick() {
      alert('Button clicked');
    }
  }
};
</script>

在上面的代码中，我们导入了Button组件，并在components选项中注册它。然后，我们在模板中使用<Button>标签，并设置type和size属性。我们还监听了按钮的点击事件，并在handleClick方法中弹出一个提示框。

通过这种方式，我们可以在整个应用程序中重复使用这个公共按钮组件，而不必重复编写样式和事件处理逻辑。

这个示例演示了如何封装一个公共的按钮组件，并在其他组件中使用它。通过封装公共组件，我们可以提高代码的可复用性和可维护性，并促进团队协作和开发效率。

全局组件和局部组件

Vue中有两种方式来使用组件：全局组件和局部组件。

全局组件是在Vue应用程序中全局注册的组件，可以在任何地方使用。全局组件可以在根组件或任何子组件中使用，而不需要额外的导入或注册步骤。要创建一个全局组件，可以使用Vue.component方法来定义组件并注册它。

例如，假设我们有一个名为Button的组件，我们可以在根组件中使用Vue.component来注册它作为全局组件：

// main.js
import Vue from 'vue';
import Button from './Button.vue';
Vue.component('Button', Button);
new Vue({
  // ...
});

在上面的代码中，我们导入了Button组件，并使用Vue.component方法将其注册为全局组件。现在，我们可以在任何地方使用<Button>标签来使用这个全局组件。

// App.vue
<template>
  <div>
    <Button></Button>
  </div>
</template>
<script>
export default {
  // ...
};
</script>

局部组件是在Vue组件中局部注册的组件，只能在该组件内部使用。局部组件需要在组件的components选项中注册。局部组件只能在该组件的模板中使用，而无法在其他组件中使用。

例如，假设我们有一个名为App的根组件，我们可以在components选项中注册Button组件作为局部组件：

<template>
  <div>
    <Button></Button>
  </div>
</template>
<script>
import Button from './Button.vue';
export default {
  name: 'App',
  components: {
    Button
  },
  // ...
};
</script>

在上面的代码中，我们导入了Button组件，并在components选项中注册它作为局部组件。现在，我们可以在App组件的模板中使用<Button>标签来使用这个局部组件。

通过全局组件和局部组件，我们可以在Vue应用程序中使用组件来封装可复用的功能和界面元素。全局组件适用于多个组件之间共享的组件，而局部组件适用于单个组件内部使用的组件。选择使用全局组件还是局部组件取决于具体的应用场景和需求。

脚手架vue-cli中的组件

在Vue CLI中创建的项目中，组件的使用方式稍有不同。Vue CLI是一个官方提供的用于快速搭建Vue项目的脚手架工具，它提供了一些默认的项目结构和配置。

在Vue CLI中，我们可以使用单文件组件（Single File Components）来定义和使用组件。单文件组件将模板、脚本和样式都放在一个文件中，使得组件的结构更清晰，便于维护和管理。

在Vue CLI项目中，通常会在src目录下创建一个名为components的文件夹，用于存放组件文件。我们可以在该文件夹中创建一个新的组件文件，例如Button.vue。

在Button.vue文件中，我们可以使用<template>标签定义组件的模板，使用<script>标签定义组件的脚本，使用<style>标签定义组件的样式。例如：

<template>
  <button class="button" @click="handleClick">{{ label }}</button>
</template>
<script>
export default {
  name: 'Button',
  props: {
    label: {
      type: String,
      required: true
    }
  },
  methods: {
    handleClick() {
      this.$emit('click');
    }
  }
};
</script>
<style scoped>
.button {
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border-radius: 4px;
}
</style>

在上面的代码中，我们定义了一个名为Button的组件。组件有一个label属性，用于显示按钮的文本。当按钮被点击时，会触发handleClick方法，并通过$emit方法触发一个名为click的自定义事件。

要在其他组件中使用Button组件，我们需要在目标组件中导入它，并在components选项中注册它。例如，在App.vue组件中使用Button组件：

<template>
  <div>
    <Button label="Click me" @click="handleButtonClick"></Button>
  </div>
</template>
<script>
import Button from './components/Button.vue';
export default {
  name: 'App',
  components: {
    Button
  },
  methods: {
    handleButtonClick() {
      alert('Button clicked');
    }
  }
};
</script>

在上面的代码中，我们导入了Button组件，并在components选项中注册它。然后，在模板中使用<Button>标签来使用这个组件，并设置label属性和监听click事件。

通过这种方式，我们可以在Vue CLI项目中创建和使用组件。单文件组件使得组件的定义和使用更加清晰和方便，有助于提高代码的可维护性和可复用性。

以上就是详解Vue中公共组件的封装的详细内容，更多关于Vue公共组件的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

vue3中事件处理@click的用法详解
@click指令用于监听元素的点击事件,并在触发时执行相应的处理函数,在Vue3中,事件处理就可以通过@click指令来实现,下面我们就来看看如何在Vue3中处理点击事件吧
2023-08-08
浅谈Vue的双向绑定和单向数据流冲突吗
单项数据流和双向数据绑定的概念，这两种不是相互冲突的吗？即然能用v-model双向数据绑定，不应该就是双向数据流了吗？本文就详细的介绍一下
2022-04-04
Element Timeline时间线的实现
本文主要介绍了Element Timeline时间线的实现，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-10-10
el autocomplete支持分页上拉加载使用详解
这篇文章主要为大家介绍了el autocomplete支持分页上拉加载使用详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-11-11
vue electron应用调exe程序的实现步骤
这篇文章主要介绍了vue electron应用调exe程序的实现步骤,用Python写了一个本地服务编译成exe程序,在electron程序启动后,自动执行exe程序,文中有详细的代码示例供大家参考,需要的朋友可以参考下
2024-02-02
elementUI select组件value值注意事项详解
这篇文章主要介绍了elementUI select组件value值注意事项详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-05-05
vue实现固定位置显示功能
这篇文章主要介绍了vue实现固定位置显示功能,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
2019-05-05
echarts.js 动态生成多个图表使用vue封装组件操作
这篇文章主要介绍了echarts.js 动态生成多个图表使用vue封装组件操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-07-07
Vue 过滤器filters及基本用法
这篇文章主要介绍了Vue 过滤器filters的实例代码以及vue过滤器的基本用法,需要的朋友可以参考下
2017-12-12
iview实现select tree树形下拉框的示例代码
这篇文章主要介绍了iview实现select tree树形下拉框的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2018-12-12

详解Vue中公共组件的封装

目录

全局组件和局部组件

脚手架vue-cli中的组件

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具