Vue基础-05

Day-05

1.组件-插槽

vue提供组件插槽能力, 允许开发者在封装组件时，把不确定的部分定义为插槽

需求: 以前折叠面板案例, 想要实现不同内容显示, 我们把折叠面板里的Pannel组件, 添加组件插槽方式

语法口诀:

1. 组件内用<slot></slot>占位

2. 使用组件时<Pannel></Pannel>夹着的地方, 传入标签替换slot

03/Pannel.vue - 组件

 

views/03_UserSlot.vue - 使用组件

views/03_UseSlot.vue - 组件插槽使用

总结: 组件内容分发技术, slot占位, 使用组件时传入替换slot位置的标签

2.组件-插槽-默认内容

口诀: <slot>夹着内容默认显示内容, 如果不给插槽slot传东西, 则使用<slot>夹着的内容在原地显示  

3.组件-具名插槽

传入的标签可以分别派发给不同的slot位置

要求: v-slot一般用跟template标签使用 (template是html5新出标签内容模板元素, 不会渲染到页面上, 一般被vue解析内部标签)

components/04/Pannel.vue - 留下具名slot

views/04_UseSlot.vue使用

==v-slot可以简化成#使用==

v-bind可以省略成: v-on: 可以省略成@ 那么v-slot: 可以简化成#

总结: slot的name属性起插槽名, 使用组件时, template配合#插槽名传入具体标签

4.组件-作用域插槽

复习: 插槽内slot中显示默认内容

例子: 默认内容在子组件中, 但是父亲在给插槽传值, 想要改变插槽显示的默认内容

口诀:

1. 子组件, 在slot上绑定属性和子组件内的值

2. 使用组件, 传入自定义标签, 用template和v-slot="自定义变量名"

3. scope变量名自动绑定slot上所有属性和值

components/05/Pannel.vue - 定义组件, 和具名插槽, 给slot绑定属性和值

views/05_UseSlot.vue

5.组件-作用域插槽-使用场景

案例: 封装一个表格组件, 在表格组件内循环产生单元格

准备MyTable.vue组件 – 内置表格, 传入数组循环铺设页面, 把对象每个内容显示在单元格里

准备UseTable.vue – 准备数据传入给MyTable.vue使用

components/06/MyTable.vue

views/06_UseTable.vue - 准备数据, 传入给MyTable.vue组件里循环使用

例子: 我想要给td内显示图片, 需要传入自定义的img标签

正确做法:

在MyTable.vue的td中准备<slot>占位, 但是外面需要把图片地址赋予给src属性,所以在slot上把obj数据绑定

 

components/06/MyTable.vue

在UseTable使用MyTable的时候, template上v-slot绑定变量, 传入img组件设置图片地址

6.自定义指令-注册

除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。 v-xxx

html+css的复用的主要形式是组件

你需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令

获取标签, 扩展额外的功能

局部注册

07_UseDirective.vue - 只能在当前组件.vue文件中使用

全局注册

在main.js用 Vue.directive()方法来进行注册, 以后随便哪个.vue文件里都可以直接用v-fofo指令

总结: 全局注册自定义指令, 哪里都能用, 局部注册, 只能在当前vue文件里用

7.$refs-获取DOM

利用 ref 和 $refs 可以用于获取 dom 元素

8.$refs-获取组件对象

9.$nextTick使用

10.$nextTick使用场景

11.v-model的本质

新建src/components/Add组件, 准备实现双向数据绑定

在App.vue, 准备变量传入组件中

总结

1、Vue 的 nextTick 的原理是什么? （高薪常问）

\1. 为什么需要 nextTick ，Vue 是异步修改 DOM 的并且不鼓励开发者直接接触 DOM，但有时候业务需要必须对数据更改--刷新后的 DOM 做相应的处理，这时候就可以使用 Vue.nextTick(callback)这个 api 了。

\2. 理解原理前的准备 首先需要知道事件循环中宏任务和微任务这两个概念,常见的宏任务有 script, setTimeout, setInterval, setImmediate, I/O, UI rendering 常见的微任务有 process.nextTick(Nodejs),Promise.then(), MutationObserver;

\3. 理解 nextTick 的原理正是 vue 通过异步队列控制 DOM 更新和 nextTick 回调函数先后执行的方式。如果大家看过这部分的源码，会发现其中做了很多 isNative()的判断，因为这里还存在兼容性优雅降级的问题。可见 Vue 开发团队的深思熟虑，对性能的良苦用心。

2. vue中solt的使用方式，以及solt作用域插槽的用法

使用方式：当组件当做标签进行使用的时候，用slot可以用来接受组件标签包裹的内容，当给solt标签添加name属性的 时候，可以调换响应的位置 (高级用法) 插槽作用域： 当传递的不是单一的标签, 例如需要循环时, 把要循环的标签传入, 组件内使用v-for在slot标签上, 内部可以v-bind:把值传出来, 再外面把值赋予进去, 看示例

3. 自定义指令(v-check、v-focus)的方法有哪些?它有哪些钩子函数?还有哪些钩子函数参数?（必会）

全局定义指令：在vue对象的directive方法里面有两个参数，一个是指令名称，另外一个是函数。组件内定义指令：directives

钩子函数：bind(绑定事件触发)、inserted(节点插入的时候触发)、update(组件内相关更新)

钩子函数参数：el、binding

4. is这个特性你有用过吗？主要用在哪些方面？（高薪常问）

 1**）动态组件**

<component :is="componentName"></component>， componentName可以是在本页面已经注册的局部组件名和全局组件名,也可以是一个组件的选项对象。 当控制componentName改变时就可以动态切换选择组件。

 2**）is的用法**

有些HTML元素，诸如 <ul>、<ol>、<table>和<select>，对于哪些元素可以出现在其内部是有严格限制的。

而有些HTML元素，诸如 <li>、<tr> 和 <option>，只能出现在其它某些特定的元素内部。

<ul>

<card-list></card-list>

</ul>

所以上面<card-list></card-list>会被作为无效的内容提升到外部，并导致最终渲染结果出错。应该这么写：

<ul>

<li is="cardList"></li>

</ul>