vue 自定义组件

目录

使用组件的好处

定义组件

全局组件

 局部组件

总结

---

使用组件的好处

• 可复用
• 易维护
• 可封装,易使用
• 在大型项目中可以降低组件之间的复用性

定义组件

在项目src中的components文件夹中新建vue文件用于定义组件

 

全局组件

全局组件在main.js中直接使用Vue.component 之后便可在全局使用

import Jrqkl from './components/Jrqkl.vue'
Vue.component('Jrqkl',Jrqkl)

 

 局部组件

局部组件在需要引入的项目中单独引入

<template>
  <div id="app">
    <!-- 使用组件 -->
    <Jrqkl/>
    </div>
</template>

<script>
// 引入组件
import Jrqkl from './components/Jrqkl.vue';
export default {
  name:'App',
  // 注册组件
  components:{
    // Jrqkl
  }
}
</script>

 

总结

 在日常使用中应该尽量避免使用全局引入，这会大大增加项目体积，在组件复用性不高的情况下，应该使用局部引入，只有在组件复用性非常高的时候才应该考虑使用全局引入