VUE基础（五）

一、ref引用

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

 注：

• 在每个vue实例上，都包含一个$refs对象
• 默认情况下，组件的$refs指向一个空对象

 1、使用ref引用页面上的DOM元素

 步骤

1. 为要引用的DOM添加ref属性，并提供引用的名称
2. 通过this.$refs.引用的名称，可获取DOM元素的引用

 2、使用ref引用组件

 步骤

1. 为要引用的组件添加ref属性，并提供引用的名称
2. 通过this.$refs.引用的名称，可引用组件的实例
3. 引用到组件的实例后，可以调用组件上的methods方法

 counter.vue中

 3、$nextTick方法

用于解决：

DOM更新是异步的，当函数中涉及到更新DOM，并马上利用ref对DOM进行操作时，会undefined的问题

组件的$nextTick(cb)方法，会把cb回调推迟到下一个DOM更新操作之后执行。从而能保证cb回调函数可以操作到最新的DOM元素

二、动态组件

动态组件，指动态切换组件的显示与隐藏

vue提供了内置的组件，专门用来实现组件的动态渲染

 注：

• 为要动态渲染的组件的占位符
• 通过is属性动态的指定要渲染的组件名称

 步骤：

1. 在data中定义当前要渲染的组件的名称
2. 通过is属性，动态指定要渲染的组件的名称
3. 可进行动态切换组件名称操作

 示例：

使用 keep-alive保持状态

默认情况下，切换动态组件时，被切换掉的组件会被卸载，无法保持组件的状态（对组件的数据等进行的一些操作），可使用保持动态组件的状态

示例：

三、插槽

在开发者封装组件时，把不确定的、希望由用户指定的部分定义为插槽。

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

 1、插槽的基础用法

可通过元素定义插槽，从而为用户预留内容占位符

 注：

• 如果在组件封装的过程中，没有预留任何插槽，则用户提供的任何自定义内容都会被丢弃

 示例：

App.vue

Mycount.vue

 2、插槽的后备内容

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

这是后备内容

  示例：

App.vue

Mycount.vue

 3、具名插槽

在封装组件时，需要预留多个插槽节点，则需要为每个插槽指定具体的name名称，

这种带有具体名称的插槽叫做具名插槽。

 创建具名插槽

 标题内容

 向组件标签的内容节点中，插入具名插槽的内容

 注：

• 在声明插槽时，若没有指定名称，则会有隐含的名称叫做“default”
• 只有默认插槽可省略外层的template，插入具名插槽时，template不能被省略
• v-slot:可简写为#

 示例：

App.vue

Mycount.vue

 4、作用域插槽

在封装组件的过程中，可以为预留的插槽绑定props数据，这种带有props数据的叫做作用域插槽

 为插槽动态的传递props数据

 在使用自定义组件时接收props数据

 注：

• scope默认接收的是一个对象，可通过scope.属性名查看具体属性

 解构作用域插槽的prop

  利用解构赋值即可

四、自定义指令

 当v-for、v-if等内置指令无法满足开发者的需求时，开发者可自定义指令

分类：

• 私有自定义指令
• 全局自定义指令

 注：

• 自定义指令在使用时，必须以v-前缀开头，在声明时，不需要加

 1、私有自定义指令

可在组件中，通过directives节点声明私有自定义指令

 示例：

2、全局自定义指令

全局自定义指令需要在main.js中进行声明，全部组件都可使用

 示例：

main.js中

const app = createApp(App)

// 声明全局自定义指令
// app.directive(自定义指令名，配置对象)
app.directive('focus', {
  mounted(el) {
    el.focus()
  },
}) 

其他组件中

updated函数

mounted函数只在元素第一希插入DOM时被调用，当DOM更新时不会触发

updated函数会在每次DOM更新完成后被调用

 注：

• 在vue2中使用自定义指令时，两个函数的名称有变化mounted->bind  updated->update
• 当mounted与 updated逻辑完全相同时，可简写

// 声明全局自定义指令v-focus
// app.directive(自定义指令名，配置对象)
app.directive('focus', {
  mounted(el) {
  //DOM初次渲染时，自动获取焦点
    el.focus()
  },
  updated(el) {
    //DOM更新后，依旧能够自动获取焦点
    el.focus()
  },
}) 

简写形式

app.directive('focus', (el) => {
//在mounted和updated函数中都会触发
  el.focus()
})

 3、指令的参数值

在绑定指令时，可以通过等号的形式为指令绑定具体的参数值

// binding.value接收具体的参数值
app.directive('color', (el, binding) => {
  el.style.color = binding.value
})