Vue组件

1.什么是Vue组件

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

2.vue中的组件化开发

vue是一个支持组件化开发的前端框架。

vue中规定：组件的后缀名是.vue。之前接触到的App.vue文件本质上就是一个vue的组件。

3.vue组件的三个组成部分

每个.vue组件都由3部分构成， 分别是：template ->组件的模板结构

script ->组件的Javascript行为

style ->组件的样式

4.组件之间的父子关系

在vue项目中，封装了3个组件：组件app、组件left、组件right

组件在被封装好之后，彼此之间是相互独立的，不存在父子关系

在使用组件的时候，根据彼此的嵌套关系，形成了父子关系、兄弟关系

4.1使用组件的3个步骤

　　1.使用import语法导入需要的组件

　　2.使用components节点注册组件

　　3.以标签形式使用刚才注册的组件

4.2通过compoments注册的是私有子组件

例如组件A的components节点下，注册了组件F。则组件F只能用在组件A中，不能被用在组件C中。

4.3注册全局组件

在vue项目的main.js入口文件中，通过Vue.component()方法，可以注册全局组件。示例代码如下：

//导入需要全局性注册的组件

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

//参数1：字符串格式，表示组件的“注册名称”

//参数2：需要被全局注册的那个组件

Vue.component('MyCount',Count)

 

5.组件的props

props是组件的自定义属性，在封装通用组件的时候，合理的使用props可以极大的提高组件的复用性，它的语法格式如下：

    export default{
        //组件的自定义属性,允许使用者通过自定义属性，为当前组件指定初始值
　　　　 //自定义属性的名字，是封装者自定义的（只要名称合法即可）
　　　　//props中的数据，可以直接在模板中使用

        props:['init']
    }

5.1props是只读的

vue规定：组件中封装的自定义属性是只读的，程序员不能直接修改props的值。否则会直接报错：

 

 5.2props的default默认值

在声明自定义属性时，可以通过default来定义属性的默认值。示例代码如下：

        props:{
            init:{
                //用default 属性定义属性的默认值
                default:0
            }
        }

5.3props的type值类型

在声明自定义属性时，可以通过type来定义属性的值类型。示例代码如下：

props:{
            init:{
                //用default 属性定义属性的默认值
                default:0,
                //用type属性定义属性的值类型
                //如果传递过来的值不符合此类型，则会在终端报错
                type:Number
            }
        }

5.4props的required必填项

        props:{
            init:{
                //用default 属性定义属性的默认值
                default:0,
                //用type属性定义属性的值类型
                //如果传递过来的值不符合此类型，则会在终端报错
                type:Number,
                //必填项校验
                required:true
            }
        }

 

6组件之间的样式冲突问题

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

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

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

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

6.1解决组件样式冲突的问题：

方案一：给不同的组件中，加一个不同的属性，比如data-v-001

6.2vue中，style的scoped属性

方案二：给当前组件添加scoped属性

6.3/deep/样式穿透

当使用第三方组件库的时候，如果有修改组件默认样式的需求，需要用到/deep/

 

<style lang="less" scoped>
    .test-box {
        background-color: pink;
    }
    h3{
        color: red;
    }
    /deep/ h5{
    color: pink;
  }
</style>