vue使用公共组件component

在Vue.js中，"公共组件"（也称为复用组件或独立组件）是指可以被多个页面或组件引用的可重用模块。它们通常封装了通用的功能或UI元素，比如导航栏、表单验证、按钮等。创建和使用公共组件的步骤如下：

1. **创建组件**：
- 创建一个新的文件夹，如`components`，用于存放所有独立的组件。
- 在该文件夹内创建.vue文件，例如`MyButton.vue`，并编写HTML结构、CSS样式以及可能的数据和方法。

<template>
  <button :class="{ primary: isPrimary }">{{ buttonText }}</button>
</template>

<script>
export default {
  props: {
    isPrimary: { type: Boolean, default: false },
    buttonText: { type: String, required: true }
  }
}
</script>

<style scoped>
.primary {
  background-color: #007bff;
}
</style>

2. **注册组件**：
- 在App组件或需要使用该组件的地方，通过`import`引入组件，然后在`components`选项中注册它。

import MyButton from '@/components/MyButton.vue';

export default {
  components: {
    MyButton
  }
};

3. **在模板中使用组件**：
- 使用`< component-name >`语法将公共组件嵌入到其他组件的视图部分。

<template>
  <div>
    <my-button is-primary="true" buttonText="点击我"></my-button>
  </div>
</template>

4. **属性绑定**：
- 公共组件通常接受props（属性），可以在外部传递数据给组件，以便动态控制其行为。