Vue基础（组件基础）

Vue组件

组件的特点

• 每个组件就是一个自定义标签
• 可复用性
• 方便维护
• 方便拆分
• 每一个VUE组件都是一个独立的个体（独立的vue实例），作用域隔离（互不干扰），有完整的生命周期，有自己的响应式数据和各种方法（事件）

• 能够实现组件的嵌套：需要掌握组件之间的信息通信

组件命名规范

• 组件名字单词首字母大写 PasalCase
• 以横线作为分隔符 kabab-case
• 不能使用内置的标签名作为组件名称
• 调取组件的时候，会把所有组件的单词渲染为小写
• 命名的时候尽量不要出现其他的特殊字符

调取组件的方法

• 单闭合：不符合w3c规范，调取完成后，后面的视图不识别（避免使用的）
• 双闭合：可以设置除组件规定内容外的其余内容（slot插槽）• 创建组件的时候，data必须返回一个函数，并且函数返回一个对象，不能直接写对象
• child 是Vm这个vue实例的子组件；判断组件在哪个实例中注册，就是谁的子组件；

全局组件

• 全局组件可以在任何的vm实例中使用，每一个组件都相当于一个vue的实例，当调用这个组件时，就会生成vue的生命周期，每当使用一次就会执行一遍生命周期钩子函数• 如何创建全局组件：在Vue属性上有一个component函数，执行可以创建一个组件，接收两个参数，第一个是组件的名字，第二个是组件的信息对象

局部组件

• 局部组件只能在注册的vue实例中使用该组件，不能跨组件使用，但是可以在另一个组件vue实例中再注册一次
• 如何创建局部组件：写一个组件实例，然后在vue实例的component属性中起一个属性名，属性值为组件的名字
• 组件methods中的方法的this指向了当前组件的实例

Vue组件

组件的出现，就是为了拆分Vue实例的代码量，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以去调用对应组件即可

组件化和模块化的不同：
组件化：是从UI界面的角度进行划分的；前端的组件化，方便UI组件的重用；
模块化：是从代码逻辑的角度进行划分的；方便代码分层开发，保证每个功能模块的职能单一；

组件的声明

注意：组件调用全部使用短横线连接的方式！

组件的注册

在 vue 中，我们可以通过 new Vue 来创建一个组件，不过通常它是作为整个应用的顶层根组件存在的，我们还可以通过另外的方式来注册一个更为通用的组件

创建可复用的组件

全局组件
通过 Vue.component 注册的组件，我们称为全局组件，因为它可以在任意范围内使用

局部组件
在一个组件内部通过 components 选项注册的组件是局部组件，只能在当前 components 选项所在的组件内部使用

注意：局部注册的组件只能中当前注册的组件中使用，不能在它的子组件中使用

法一：
全局组件：位置关联下就都可以用
局部组件：仅仅当前可用

法二：
全局组件
局部组件

法三（外部定义组件）（推荐）：
全局组件
局部组件

组件的数据

data

在非 new Vue 的组件中，data 必须为函数的形式，函数返回值必须是一个对象，作为组件的最终 data，这样复用不会修改别人的数据

组件的属性应用及校验

属性应用

属性在组件标签上需要使用短横线命名法，在组件中声明需要采用驼峰命名法

    <my-button button-content="按钮"></my-button>
    components:{
        'MyButton':{
            props:['buttonContent'],
            template:'{{buttonContent}}'
        }
    }

属性校验

props 属性除了设置为一个数组还可以设置一个对象，其中 key 是 props 名，值是一个对象，在这个对象中可以设置默认值以及对这个 props 的校验规则；

常见的校验：

1. type: Number, // 类型校验，要求 pmsg 必须是某种类型，如果类型不对会抛出警告

2. required: true, // 必传校验，如果不传会引发警告

3. default: 250, // 设置默认值，如果不传的时候使用默认值
   注意：可以写成函数，返回一个对象的默认值

4. validator(val) { // 验证器函数，有问题可以抛出异常，没有问题要 return true

    Vue.component('my-component', {
        props: {
            // 基础的类型检查(null和 undefined 会通过任何类型验证)
            propA: Number,
            //多个可能的类型
            propB: [String, Number],
            //必填的字符申
            propC: {
                type: String,
                required: true
            },
            // 带有默认值的数字
            PropD: {
                type: Number,
                default: 100
            },
            // 带有默认值的对象
            propE: {
                type: object,
                //对象或数组默认值必须从一个工厂函数获取
                default: function () {
                    return { message: 'hello' }
                }
            },
            // 自定义验证函数
            propF: {
                validator: function (value) {
                    //这个值必须匹配下列字符串中的一个
                    return ['success', 'warning', 'danger'].indexof(value) !== -1
                }
            }
        }
    })
   
    
    components:{
        'MyButton':{
            props:{
                buttonContent:String,
                arr:{
                    type:Array,
                    default:()=>([])
                },
                number:{
                    type:Number,
                    validator:(value)=>{
                        return typeof value == 'number'
                    }
                },
   
            },
            template:'{{buttonContent}} {{arr}} {{number}}'
        }
    }
   

批量传入数据

非prop特性

一个非 prop 特性是指：传向一个组件，但是该组件并没有相应 prop 定义的特性，这些 props 会被自动添加到组件的根元素上

template: '

//默认不接收的参数会放到这来

$attrs存储非prop特性，inheritAttrs控制vue对非prop特性默认行为

替换/合并已有的特性

默认情况下，非prop 特性的属性会覆盖组件根元素上同名的内容，
但是针对 style 和 class 有特殊的处理，它们会合并（同名样式还是会覆盖）

禁用特性继承

如果你不希望组件的根元素继承特性，你可以在组件的选项中设置 inheritAttrs: false，
我们可以通过组件的 this.$attrs 来获取这些属性

注意 inheritAttrs: false 选项不会影响 style 和 class 的绑定