vue知识点总结（一）—— 组件化开发

L同学啦啦啦
80 阅读3分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第13天，点击查看活动详情

前言

大家好呀，我是L同学。在上篇文章跨域知识点总结中，我们学习了跨域解决方案等相关知识点。今天，在这篇文章中，vue相关知识点，包括组件化开发、组件注册等相关知识点。

组件化开发

组件就是一个个可复用的UI模块, 一个组件对一个vue实例 ( 每个组件都要有一个vue实例来管理)。组件化开发 指的是根据封装的思想，把页面上 可重用的部分 封装为 组件，从而方便项目的开发和维护。一个页面，可以拆分成一个个组件，一个组件就是一个整体, 每个组件可以有自己独立的结构样式和行为。

前端组件化开发的好处主要体现在以下两方面：

  • 提高了前端代码的复用性和灵活性
  • 提升了开发效率和后期的可维护性

组件注册

注册组件有两种注册方式: 分为全局注册和局部注册两种。被全局注册的组件，可以在任意的组件模板范围中使用 (每个组件都是一个vue实例)。被局部注册的组件，只能在当前注册的组件模板范围内使用。

全局注册

被全局注册的组件，可以在任意的组件模板范围中使用。

  1. 新建components文件夹, 准备三个文件lq-header.vue、lq-main.vue、lq-footer.vue。
<template>
  <div class="lq-header">头部</div>
</template>

<script>
export default {

}
</script>
  1. 在main.js中导入。
import LqHeader from './components/lq-header.vue'
import LqMain from './components/lq-main.vue'
import LqFooter from './components/lq-footer.vue'
  1. 全局注册。
Vue.component('lq-header', LqHeader)
Vue.component('lq-main', LqMain)
Vue.component('lq-footer', LqFooter)
  1. 使用组件。注册好的组件, 可以当成html标签使用。
<template>
  <div class="container">
     <lq-header></lq-header>
   	 <lq-main></lq-main>
   	 <lq-footer></lq-footer>
  </div>
</template>

局部注册

被局部注册的组件，只能在当前注册的组件模板范围内使用。

  1. 在App.vue中导入。
import LqHeader from './components/lq-header.vue'
import LqMain from './components/lq-main.vue'
import LqFooter from './components/lq-footer.vue'
  1. 局部注册。
export default {
  name: 'MyApp',
  components: {
    'lq-header': LqHeader,
    'lq-main': LqMain,
    'lq-footer': LqFooter
  }
}
  1. 使用局部注册的组件。
<template>
  <div class="container">
    <lq-header></lq-header>
    <lq-main></lq-main>
    <lq-footer></lq-footer>
  </div>
</template>

组件名的大小写

在进行组件的注册时，定义组件名的方式有两种：

  1. 注册使用短横线命名法，例如lq-header和lq-main。
Vue.component('lq-button', LqButton)

使用时 <lq-button> </lq-button> 2. 注册使用大驼峰命名法，例如LqHeader和LqMain。

Vue.component('LqButton', LqButton)

使用时 <LqButton> </LqButton> 和 <lq-button> </lq-button> 都可以。

推荐定义组件名时, 用大驼峰命名法, 更加方便。

全局注册：

app.component('LqButton', LqButton)

局部注册:

components: {
  LqHeader,
  LqMain,
  LqFooter
}

使用时, 推荐遵循html5规范, 小写横杠隔开。

<lq-header></lq-header>
<lq-main></lq-main>
<lq-footer></lq-footer>

通过name注册组件

在注册组件期间，除了可以直接提供组件的注册名称之外，还可以把组件的 name 属性作为注册后组件的名称。

<template>
  <button>按钮组件</button>
</template>

<script>
export default {
  name: 'lq-button'
}
</script>

进行注册。

import LqButton from './components/lq-button.vue'
Vue.component(LqButton.name, LqButton)  // 等价于 Vue.component('lq-button', LqButton)

组件样式的冲突 scoped

默认情况下，写在组件中的样式会全局生效，因此很容易造成多个组件之间的样式冲突问题。根本原因是单页应用程序中，所有组件的结构，都是基于唯一的index.html页面进行呈现的。组件样式默认会作用到全局, 就会影响到整个index.html中的dom元素。

  • 全局样式: 默认组件中的样式会作用到全局
  • 局部样式: 可以给组件加上scoped属性, 可以让样式只作用于当前组件。
<style lang="less" scoped>
div {
  background-color: pink;
}
</style>

它的原理是这样子的：添加scoped后, 会给当前组件中所有元素, 添加上一个自定义属性。添加scoped后, 每个style样式, 也会加上对应的属性选择器。最终效果，必须是当前组件的元素, 才会有这个自定义属性, 才会被这个样式作用到。

avatar
文章
阅读
粉丝