【Vue】2-10、Vue 组件

一、组件化开发

组件化开发指的是根据封装的思想，把页面上可重用的 UI 结构封装为组件，从而方便项目的开发和维护。

 

二、Vue 组件的组成 

• template：组件的模板结构
• script：组件的 JavaScript 行为
• style：组件的样式

// 使用 less 语法

 

三、组件之间的关系 

 

四、使用 Vue 的三个步骤 

 

使用 components 节点注册的组件为私有子组件，若某个组件在其他组件中需要频繁使用，可以在 main.js文件中使用 Vue.component 注册为全局组件，则在其他组件中无需重复导入该组件便可直接使用。  

import Count from '@/components/Count.vue'

Vue.component('Count',Count)

 

五、组件的 props 属性 

props 是组件的自定义属性，在封装通用组件的时候，合理的使用 props 可以极大的提高组件的复用性！  

 

六、组件之间的样式冲突间隔 

默认情况下，写在 .vue 组件中的样式会全局生效，因此容易造成多个组件之间的样式冲突问题。

导致组件之间样式冲突的根本原因是：

1. 单页面应用程序中，所有组件的 DOM 结构都是基于唯一的 index.html 页面进行呈现的

2. 每个组件中的样式都会影响整个 index.html 页面中的 DOM 元素

加上 scoped 属性即可解决样式冲突问题！

添加 scoped 属性会为该组件所有标签添加一个 data-v-xxx 属性，例如：h5[data-v-3c83f0b7]

 

/deep/ 样式穿透：  

/deep/ h5 {
  color: pink;
}

添加 /deep/ 属性会为该组件所有标签添加一个 data-v-xxx 属性，例如：[data-v-3c83f0b7] h5  

 

一  叶  知  秋，奥  妙  玄  心