Vue-ref引用-作用域插槽 - web前端 | MrNobody = MrNobody's Blog = 保持呼吸 不要断气
首页 web前端

# ref 引用

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

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

# 使用 ref 引用 DOM 元素

  • 使用 ref 属性 为对应的 DOM 添加引用名称
<h1 ref="myh1">App根组件</h1>

  • 通过 this.$refs.myh1 可以获取到 DOM 元素的引用

  • 操作 DOM 元素把文本颜色改为红色

this.$refs.myh1.style.color='red'

# 使用 ref 引用 组件 实例

  • 使用 ref 属性 为相对应的组件添加引用名称
<Counter ref="counterRef"></Counter>

  • 通过 this.$refs.counterRef 可以引用组件的实例

  • 引用到组件的实例之后，就可以调用组件上的 methods 方法

this.$refs.counterRef.reset()

# this.$nextTick (cb) 方法

组件的 $nextTick (cb) 方法，会把 cb 回调推迟到下一个 DOM 更新周期之后执行，大概意思就是，等组件的 DOM 异步的重新渲染完成后，再执行 cb 回调函数，从而保证 cb 回调函数可以操作到最新的 DOM 元素。

this.$nextTick(()=>{
    this.$refs.ipt.focus()
  })

# 插槽

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

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

# 基础用法

在封装组件时，可以通过 <slot> 元素定义插槽，从而为用户预留内容占位符

<template>
  <div class="com-container">
    <h3>MyCom组件--基本用法</h3>
    <hr>
    <p>第一个p标签</p>
    <!-- 通过 slot 标签 为用户预留内容占位符 (插槽) -->
    <slot></slot>
    <p>最后一个p标签</p>
  </div>
</template>
用户在使用组件期间 为插槽指定具体内容
<MyCom>
      <!-- 在使用组件时，为插槽指定具体的内容 -->
      <p>---用户自定义的内容---</p>
   </MyCom>
# 默认内容
封装组件，可以为预留的 <slot> 插槽提供默认内容。如果组件的使用者没有为插槽提供任何内容，则默认内容会生效
使用方式特别简单，在标签内写上默认内容即可
l
<template>
  <div class="com-container">
    <h3>MyCom组件--基本用法</h3>
    <hr>
    <p>第一个p标签</p>
    
    <slot>这是默认内容</slot>
    <p>最后一个p标签</p>
  </div>
</template>
# 具名插槽
如果在封装组件时需要预留多个插槽节点，则需要为每个 <slot> 插槽指定具体的 name 名称。这种带有具体名称的插槽叫做 "具名插槽"
<div class="com-container">
    <h3>MyCom组件--基本用法</h3>
    <hr>
  <div>
    <slot name="title"></slot>
  </div>
    <div>
    <main></main>
    </div>
    <div>
      <slot name="user"></slot>
    </div>
  </div>
在向具名插槽提供内容的时候，我们可以在 <template> 元素上使用v-slot, 并以 v-slot 的参数形式提供其名称
<MyCom>
      <template v-slot:title>
        <p>鹅鹅鹅</p>
      </template>
      <template v-slot:user>
        <p>李白</p>
      </template>
  </MyCom>
具名插槽可以简写，(v-slot:) 替换为字符#。例如 v-slot:header 可以被重写为 #header
# 作用域插槽
在封装组件的过程中，可以为预留的 <slot> 插槽绑定 props 数据，这种带有 props 数据的 <slot> 就是作用域插槽
<div class="com-container">
    <h3>MyCom组件--作用域插槽</h3>
    <hr>
    <slot :info="userInfo" :msg="message"></slot>
  </div>
v-slot:default="任意合法名" 一般使用 scope 接收 接着可以使用插值表达式渲染出来
<MyCom>
      <template #default="scope">
        <p></p>
      </template>
 </MyCom>