vue中button如何改变文字的大小_Vue组件

什么是Vue组件？

将可以重新使用的代码封装到一个.vue文件中，我们把这个文件称为一个组件。简单来说，组件就是可复用的Vue 实例。

组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树。

如何注册组件？

首先封装一个组件（组件名首字母一般大写），一般放在src/components文件夹下。例如这个Button组件：

如何引用组件？

1.全局引用：

在项目的main.js(main.ts)文件中写：

main.js:

import Vue from 'vue';
import Button from '@/components/Button.vue'; 
 
Vue.component('Button', Button); //两个参数分别是组件名和组件对象

调用：比如App.vue需要调用Button组件

App.vue:

<template>
  <div id="app">
    <Button/>
  </div>
</template>

2.局部引用：

比如App.vue需要调用局部调用Button组件

App.vue:

<template>
  <div id="app">
    <Button/>
  </div>
</template>

<script>
  import Button from '@/components/Button.vue';
 
  export default {
   components: { Button }
}
</script>