- 注册组件
-
局部注册
- 在组件对象中使用components对象属性，其属性名就是组件名，属性值就是组件对象
- 局部注册的组件在其子组件中*不可用
-
全局注册
- 在入口文件(main.js)根Vue创建(new Vue)前注册
- Vue.component(componentName, component)
-
自动化全局注册：require.context（webapck）
- 用法：const files = require.context(目录，是否查子文件夹，文件名);
-
files.keys().forEach(item => {const file = files(item);
const name = file.default ? file.default.name : file.name;
Vue.component(name, file.default || file)
})
file就是一个module，如果组件是通过export default导出的，则file.default就是组件对象，否则回退到使用模块的根
-
slot
- $slot用来访问被插槽分发的内容。
- 每个具名插槽有其相应的 property (例如：
v-slot:foo中的内容将会在vm.$slots.foo中被找到)。defaultproperty 包括了所有没有被包含在具名插槽中的节点，或v-slot:default的内容。 <slot>作用域：父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。所以slot里的内容渲染的是父作用域的值。- 为了让父模板中能使用子模板的作用域，可以在子模板的
<slot :childProp="变量">，这样在父模板中就可以<template #slot名="allProp">{{allProp.childProp就是子模板中 变量 的值}}</template>，childProp叫插槽prop，slot上可以绑定很多插槽prop，allProp下包含所有的插槽prop属性。 - 由于插槽实际是一个把插槽内容包裹在单个参数的函数里，所以allProp可以用解构的方式书写，
<template #slot名="{变量1，变量2}">{{变量1}}{{变量2}}</template>，除了解构，解构重命名、提供默认值语法都支持 - 备用内容：
<slot>备用内容</slot>包住的内容是父级模板没有插槽内容的时候显示的。 - v-slot只能添加在
<template>上，除了独占默认插槽的缩写语法，当只有默认插槽时，组件标签可以当做插槽的模板使用，即<template v-slot="allProp"> - 注意默认插槽的缩写语法不能和具名插槽混用，因为它会导致作用域不明确
- 子模板中有多个同名的slot，则会多次渲染父模板的同名template的内容，因为插槽实际是一个把插槽内容包裹在单个参数的函数里，就是有多个函数执行。
-
父子组件通讯
- 访问根组件实例：$root
- 访问父组件实例：$parent
- 访问子组件实例：$refs，当
ref和v-for一起使用的时候，你得到的 ref 将会是一个包含了对应数据源的这些子组件的数组。 - 孙组件向上访问 provide/inject
- 这对选项需要一起使用，用于祖先组件向子孙组件注入依赖。
- provide值是一个对象，或者是返回对象的函数
- inject的值可以是一个字符串数组，字符串就是注入的依赖名
- inject的值可以是一个对象，key是本地的绑定名，value是在可用的注入中搜索用的key
- inject的值可以是一个对象，key是本地的绑定名，value是一个对象，有两个属性，from是可用的注入中搜索用的key，default是降级情况下用的value。即key是别名，from是注入的名字，default是没传入该名字依赖时的默认值。
- inject和provide绑定不是响应的，但是如果是可响应对象的话，还是响应的。
-
computed
- 一般问到computed，都会想到这种类型值：{ [key: string]: Function }，key就是可以绑定到this上的属性名，Function的返回值就是这个key的值。计算属性的结果会被缓存，除非依赖的响应式 property 变化才会重新计算。其实这种就是只有getter的写法，等价于{key:{ get: Function} }
- 一种是{key: { get: Function, set: Function }}，get和set里的函数this自动绑定到vue实例，但是如果用箭头函数，this就不是指向实例了。只要是要获取key的值，就会经过set获得。
-
v-model
- 这是双向数据绑定
- 双向数据绑定=单向数据绑定+UI事件监听
- v-model="A"是:value="A"和@input="val=>A=val"的结合的语法糖。
- 给组件设置v-model，组件内部就能获取到名为value的props，当组件内$emit("input")就会改变v-model绑定的变量名的值
-
单向数据流
- props
- vuex
-
响应式更新
- Object.definedProperty
-
表单元素需要设置name属性，未设置name属性的表单元素将不会被提交。所以做一些组件模拟比如开关，都是需要放一个表单元素（input），绑定name，把值绑定到表单元素上面才行。
-
props和attribute
- attitude就是没被定义的props（除class和style）
- attitude默认会绑定到根元素上作为标签属性
- 如果中间组件都不需要用到某个（比如A）props，那么就可以不在自己的组件中接收定义props，这样配合inheritAttrs: false,并在需要A的组件B上绑定v-bind="$attrs"，就能在B上接收props:A
- 如果不设置inheritAttrs: false，则绑定v-bind="$attrs"也无法传递。
- 设置inheritAttrs: true，则attitude不会再被绑定到标签上作为标签属性
- 设置inheritAttrs: true，并在组件内任意元素（包括原生div）上使用v-bind="$attrs"，则会在该元素上渲染attitude属性
- class和style不受inheritAttrs控制，也不会通过v-bind绑定到别的组件上。且class和style会自动合并外面传进来的和组件内部根元素本身定义的内容。
- 外面传入的attitude会把里面根元素写好的attitude替换破坏掉
-
style scope
- style里面的scope为什么能产生样式隔离？因为加了scope以后，vue会在组件上所有标签加上hash属性，然后类名会变成 .xx[hash] {} 这样，相当于加了属性选择器，达到样式隔离的效果
-
过渡动画
- 使用
<transition>包裹 - 有六种状态，v-enter,v-enter-active,v-enter-to,v-leave,v-leave-active,v-leave-to。可以在v-enter,v-enter-to增加状态，v-enter-active增加transition过渡属性，这样动画就产生了，或者直接只使用v-enter-active定义@keyframe的动画。
- 使用
