发表于： 2019-12-10 22:01:44
1 1451
今天完成的事情：
1 vue插槽slot，$nextTick、mixin混入
明天计划的事情：
1复习
遇到的问题：
1 暂无
收获：
子组件没有包含一个<slot>元素，父组件引入后则该组件起始标签和结束标签之间的任何内容都会被抛弃，记住一条规则父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的
插槽模板：slot，是组件的一块HTML模板，这块模板显示不显示、显示效果由父组件来决定，但是插槽显示的位置却由子组件自身决定，slot写在组件的什么位置，父组件传过来的模板将来就显示在什么位置
模板角度：非插槽模板 / 插槽模板两大类。非插槽模板指html模板，如div、span、ul、table等，非插槽模板的显示与隐藏以及怎样显示由组件自身控制；插槽模板是slot，它是一个空壳子，因为它的显示与隐藏以及最后用什么样的html模板显示由父组件控制，
单个/默认/匿名 插槽：单个插槽是官方叫法，也可叫默认插槽，或具名插槽相对，叫它匿名插槽(因为它不用设name属性)
slot里面可以显示后备内容，当父组件没有用到slot就会显示，用到就不显示
具名插槽：匿名插槽加name属性，变成具名插槽。具名插槽可以在一个组件中出现N次，出现在不同的位置
插槽上标签设name="" ，传递插槽内容的标签上设slot="name的值"
作用域插槽| 带数据的插槽：作用域插槽使用时必须template标签开头和结尾，slot标签上绑定的特性称为插槽prop(是个对象)，父级中用slot-scope="定义提供的插槽prop的名字"
前面说，插槽最后显示不显示是看父组件有没有在子组件内模板，写了，插槽就得在浏览器上显示该有的模样，没写，插槽就是空壳子(有默认内容则会显示)。 有html模板(父组件会往子组件插模板)，样式由父组件的html+css共同决定。作用域插槽绑定了一套数据，父组件可以拿来用。于是，情况就变成了这样：样式父组件说了算，但内容可以显示子组件插槽绑定的
作用域插槽跟单个插槽和具名插槽的区别：单个插槽和具名插槽不绑定数据，父组件提供的模板一般要既包括样式又包括内容。而作用域插槽，父组件只需要提供一套样式(在确实用作用域插槽绑定的数据的前提下）
使用具名插槽：写成v-slot：不加引号。匿名/默认插槽<slot>含有 "default" 名称，可v-slot: default引用，或不写v-slot
使用作用域插槽：写成v-slot:default="定义提供的插槽prop的名字" 或简写 v-slot=""
单个默认插槽的缩写形式：v-slot可直接写在子组件的标签上，但是要注意为了避免作用域模糊，默认插槽的缩写语法与具名插槽混用时，就不能用这种缩写，要在默认插槽内容外要加上template标签(template模板语法)
插槽内容的解构赋值：v-slot=""引号内值其实是一个参数，也就是说只要满足函数参数定义js表达式的都可以接受，所以可以用结构语法来提取插值的内容
动态插槽名称：允许我们定义动态插槽名称
![]()
命名插槽简写：与v-on类似，v-slot也有简写，即用#代替v-slot。例 v-slot:a简写成 #header
注意和其他指令一样，只有在提供参数时才能使用简写形式，就是说，如果你想使用简写语法，必指定插值的名字
$nextTick()：详解在同一事件循环中的数据变化后，DOM完成更新，立即执行nextTick(callback)内的回调
注意vue在created和mounted 阶段，如果需要操作渲染后的试图，也要使用nextTick方法
注意如果同一个watcher被多次触发，只会被推入到队列中一次，就是如果一个值被修改多次，推入队列的时候不会一条一条执行，而是推入最新的一次
混入mixins：详情是一种分发Vue组件中可复用功能的非常灵活的方式。混入对象可包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项
全局混入：详情1main.js中引入mixin文件 2Vue.mixin(引入名)。注意使用全局混入，它将影响每一个之后创建的Vue实例
混入选项合并策略：数据(data中)冲突，以当前组件的数据为准。同名钩子函数合并为一个数组，都会被调用(混入在自身狗之前调用)。值为对象的选项，例methods、components等将合并为一个对象，键名冲突时去当前组件键值对
自定义选项合并策略：自定义选项将使用默认策略，即简单地覆盖已有值。如果想让自定义选项以自定义逻辑合并，可以向 Vue.config.optionMergeStrategies添加一个函数，具体详情看上链接
返回列表
评论