Vue-组件高级(下）

一、目标

• 能够知道如何使用ref引用DOM和组件实例
• 能够知道$nextTick的调用时机
• 能够说出keep-alive元素的作用
• 能够掌握插槽的基本用法
• 能够知道如何自定义指令

二、目录

• ref引用
• 动态组件
• 插槽
• 自定义指令
• Table案例

ref引用

---

1.什么是ref引用

ref用来辅助开发者在不依赖于jQuery的情况下，获取DOM元素或组件的引用。

每个vue的组件实例上，都包含一个$refs对象，里面存储着对应的DOM元素或组件的引用。默认情况下，组件的$refs指向一个空对象。

 2.使用ref引用DOM元素

如果想要使用ref引用页面上的DOM元素，则可以按照如下的方式进行操作：

 3.使用ref引用组件实例

如果想要使用ref引用页面上的组件实例，则可以按照如下的方式进行操作：

4.控制文本框和按钮的按需切换

通过布尔值inputVisible来控制组件中的文本框与按钮的按需切换。示例代码如下：

5.让文本框自动获得焦点

当文本框展示出来之后，如果希望它立即获得焦点，则可以为其添加ref引用，并调用原生DOM对象的.focus（）方法即可。示例代码如下： 

 在这里会输出undefined，原因是  DOM元素的更新是异步的，当执行到这行代码的时候，Dom还没有进行更新。

6.this.$nextTick(cd)方法

组件的$nextTick(cb)方法，会把cd回调推迟到下一个DOM更新周期之后执行。通俗的理解是：等b组件的DOM异步地重新渲染完成后，再执行cd回调函数。从而能保证cd回调函数可以操作到最新的DOM元素。

动态组件 

---

1.什么是动态组件

动态组件指的是动态切换组件的显示与隐藏。vue提供了一个内置的组件，专门用来实现组件的动态渲染。

①是组件的占位符

②通过is属性动态指定要渲染的组件名称

③is="要渲染的组件的名称">

2.如何实现动态组件渲染

 3.使用keep-alive保持状态

默认情况下，切换动态组件时无法保持组件的状态。此时可以使用vue内置的组件保持动态组件的状态。示例代码如下：

  在切换组件的时，切换组件的时候组件的数据会重置。将component组件用keep-alive包括，可以缓存组件中的数据，切换组件时可以保存数据，不会丢失。 

插槽

1.什么是插槽

插槽(Slot)是vue为组件的封装者提供的能力。允许开发者在封装组件时，把不确定的、希望由用户指定的部分定义为插槽。

 可以把插槽认为是组件封装期间，为用户预留的内容的占位符。

2.体验插槽的基础用法

 如果子组件中有内容不确定可以用slot占位，在父组件中使用子组件是插入即可，会自动渲染到子组件预留的位置。

 2.1没有预留插槽的内容会被丢弃

如果在封装组件时没有预留任何插槽，则用户提供的任何自定义内容都会被丢弃。示例代码如下：

 没用slot的，不会被渲染出来

 2.2后备内容（默认内容）

封装组件时，可以为预留的插槽提供后备内容（默认内容）。如果组件的使用者没有为插槽提供任何内容，则后备内容会生效。示例代码如下：

3.具名插槽

如果在封装组件时需要预留多个插槽节点，则需要为每个插槽指定具体的name名称。这种带有具体名称的插槽叫做“具名插槽”。示例代码如下： 

 注意：没有指定name名称的插槽，会有隐含的名称叫做"default"。

3.1为具名插槽提供内容

在向具名插槽提供内容的时候，我们可以在一个