Vue 组件

组件

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

组件可分为根组件和可复用性组件

根组件：通过new Vue()创建,通常应用中只有一个
    不建议使用多个根组件
可复用性组件：通过Vue.component('组件名称',{组件选项})来创建
       组件名称遵循自定义组件命名规范:全小写、连字符
       组件选项与new Vue()选项配置基本一致(没有el)

可复用性组件(全局组件,局部组件)

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


局部组件的定义:
 通过components:{'组件名称':{组件选项}}
 component需要带s
 注意:局部注册的组件只能中当前注册的组件中使用，不能在它的子组件中使用

组件中的data

 全局组件中的data写为一个方法,而且需要return,返回值为一个对象
 根组件中data:{}的写法在这里用会与根组件的data内存空间互通/共享,根组件只有一个,复用组件有很多,会造成数据混乱
 写法：data(){return {}}

组件的传参

普通传参

一、父级给子级传参
 1.父级传递,父级调用子组件,使用v-bind绑定属性的方式,通过子组件的属性传入数据
 2.子级接收,使用props,来储存数据,props是一个数组


二、子级给父级传参
 注意:vue中的数据默认的单向流动,只能父到子直接传递,但是子到父不能直接修改
 原因:因为父级的数据,不一定只是某个子级在使用,或许还有其它的子级在使用那么如果一个子级的内部随意去修改了父级的数据,很容易导致数据混乱
 步骤:
  1.子组件触发自定义事件1,$emit()来设置自定义属性,传参
  2.父组件监听自定义属性,绑定自定义事件2
  3.触发自定义事件2,并根据情况赋值

双向数据绑定

父传子：1.子组件绑定父组件属性
    2.子组件通过props接收使用
    3.model中prop指定属性(被v-model所绑定的属性)
子传父：1.子组件触发自定义事件
    2.model中event指定自定义事件
    3.自动监听,自动回调函数,自动赋值

.sync修饰符

 通常不推荐使用v-model来传参,因为v-model隐藏了太多细节,会让我们使用时，操作空间变小,出错时,不容易排查,而且绑定不了多个props
 .sync修饰符的使用:
   1.子组件绑定父组件属性,相比于v-model,在属性后添加.sync
   2.子组件通过porps来接收
   3.使用$emit()修改属性时,参数1修改为update:被绑定的属性

插槽

 默认情况下，组件模板解析后会替换整个组件内容，如果我们想在组件引用被包含的内容，可以通过 vue 提供的内置组件 slot 来获取
一、默认插槽的调用
  在模板中使用<slot></slot>标签来调用默认插槽
二、具名插槽可分开调用,通过name值来绑定名称
三、插槽的传参
通过<template></template>和v-slot来进行插槽的传参
传参：:自定义属性名="参数"
接收：v-slot:绑定属性="接收数据的一个自定义名称的对象"接收时可以使用解构赋值
   对象中的属性名为传参时的自定义属性名

非props特性

 一、一个非 prop 特性是指传向一个组件，但是该组件并没有相应 prop 定义的特性，这些 props 会被自动添加到组件的根元素上
1.父组件向子组件传参,但是子组件并未在props中接收时,该参数会添加到子组件的根元素上

2.通过设置inheritAttrs来修改根元素上是否显示未接收的参数,默认未true
3.未接收的属性可以通过this.$attrs来获取

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

props验证

 组件的 props 就是组件的参数，为了确保传入的数据在可控的合理范围内，我们需要对传入的 props 的值类型进行必要的验证
 1.基础类型的检查(null和underfined回通过任何类型的验证)
  props:{参数名:Number/String}
 2.多个可能的类型
  props:{参数名:[Number,String]}
 3.必填的字符串
  props:{参数名:{type:String,required:true}}
 4.带有默认值的数字
  props:{参数名:{type:Number,default:100}}
 5.带有默认值的对象
  props:{参数名:{type:Object,default:function(){return·····}}}
 6.自定义验证函数