vue组件化

组件化是Vue的精髓，而vue本身是有一个个组件构成的框架，vue组件化涉及到的内容非常多，当在面试当中，被面试官问到：谈一谈你对组件化的理解，你该怎么回答？

组件的分类

组件大致分为三类：

• 1、页面级别的组件
• 2、业务上可复用的组件
• 3、与业务无关的独立组件

页面级别的组件

页面级别的组件， 通常就是.vue文件组件，是组成整个项目的一个大页面。

业务上可复用的基础组件

这一类组件通常是业务中被各个页面复用的组件，通常是实现某个功能
例如：
外卖中的评分系统
点赞功能
回复功能
...

与业务无关的独立组件

这类组件通常是与业务功能无关的独立组件,可以在各个业务组件或页面组件中使用。目前比较热的是ElamentUI和view等包含的组件都是独立组件

组件的编写

写好一个组件，需要考虑那些因素，首先一个组件最重要的两个一定是数据和事件,组件开发要考虑可扩展性，在vue中组件扩展通过slot来实现。
数据：data和prop
事件：组件的事件
slot:主要用于组件的扩展

注：组件开发中有三个非常重要的API，可以认定为组件开发的三要素分别是：prop,event,slot

props属性

props:定义了组件可以接收那些配置的属性，主要是用来接收父组件传递的数据。props接收的属性可以是数组形式、对象形式、字符串形式。可以对父组件传递过来props属性进行校验

例：//父组件
<template>
    <div>
        // name是String类型且必填，age是number类型且非必填，type必须是success、warning、primary中的一个。
        <Child :name=name :age=age :type=type></Child>
    </div>
</template>
<script>
    export default {
        data(){
            return{
                name:"eric",
                age:22,
                type:"success"
            }
        }
    }
</script>

例：// 子组件
<template>
    <div>
        <ul>
            <li>{{name}}</li>
            <li>{{age}}</li>
        </ul
    </div>
</template>
<script>
    export default {
        props:{
        //使用对象形式对数据进行校验，对组件开发非常有利。
            name:{
                type:String ,  // 字符串类型
                require: true // 必填
            },
            age:{
                type：Number,
                require:false
            },
            type:{
                validator: function (){
                    return(['success','warning','primary'].indexOf(value))>-1
                }
            }
        }
    }
</script>

event 自定义事件

利用组件之间的通信，子组件传递父组件形式

例：//子组件
<template>
    <div>
         <ul>
            <li>{{name}}</li>
            <li>{{age}}</li>
        </ul>
        <button @click="$emit(onClick,'传递的值')">子父传递</button>
    </div>
</template>

例：// 父组件
<template>
    <div>
       <Child @onclick="handleClick"></Child>
    </div>
</template>
<script>
    export default {
        data(){
          return {
              
          }  
        },
        methods:{
            handleClick(e){
            // 子组件传递给父组件的值
                console.log(e)
            }
        }
    }
</script>

slot属性

我们定义的组件通常会被用到各个地方，但不一定能够满足所有的使用场景，有时候还需要对它进行一些扩展，这时候就需要用到slot。
一句话描述：就是用来在组件中插入新的内容。

例：// 子组件
<template>
    <div>
         <ul>
            <li>{{name}}</li>
            <li>{{age}}</li>
        </ul>
        <button @click="$emit(onClick,'值')">子父传递</button>
        <slot></slot>
    </div>
</template>

//父组件
<template>
    <div>
        <Child  @onClick = 'handleClick' :age = age :type = type >
            <div>这是通过slot插入的一句话</div>
        </Child>
    </div>
</template>

注：使用了slot插入的一段话，实现了功能的扩展。如果当西药扩展更多的功能可以使用具名插槽

总结：

组件分类：

• 1、页面级组件
• 2、业务上课复用的基础组件
• 3、与业务无关的独立功能组件

组件开发三要素：

• 1、props用于定义组件的属性
• 2、自定义事件用于触发组件的事件
• 3、slot用于组件功能的扩展