[JavaScript知识库]vue相关属性Key、Ref、v-slot

vue相关属性注意事项

1、特殊attribute

#key

· 值可以是number|string|boolean(2.4.2新增)|symbol(2.4.2新增)

·有相同父元素的子元素必须有独特的key。重复的key会造成渲染错误！

例如：最常见的用例结合是v-for

<ul>
    <li v-for="item in items" :key="item.id"></li>
</ul>

在这里，它用于强制替换元素/组件，而不是重复使用它。

在以下场景中它会很实用：

（1）完整地触发组件的生命周期钩子

（2）触发过渡

<transiition>
    <span :key="text">{{text}}</span>
</transition>

当text发生改变时，<span>会被替换，而不是被修改，所以我们触发了过渡！

#ref

· 值可以是string

· ref用来给元素或子组件注册引用信息，引用信息回注册在父组件。

· $refs如果在普通的DOM元素上使用，引用指向的就是DOM元素。如果用在子组件上，引用指向组件实例！

· 当v-for用于元素或组件时，引用信息时包含DOM节点或组件实例的数组。

#v-slot

· 将元素或组件表示为作用域插槽。

· 缩写：#

· 参数：插槽名（可选。默认值是default）

· 限用于<template>和组件中！

（1）具名插槽

有时我们需要多个插槽。例如：

<div class="container">
  <header>
    <!-- 我们希望把页头放这里 -->
  </header>
  <main>
    <!-- 我们希望把主要内容放这里 -->
  </main>
  <footer>
    <!-- 我们希望把页脚放这里 -->
  </footer>
</div>

对于上面的情况，<slot>元素有一个特殊的attribute：name。这个attribute可以用来定义额外的插槽：

<div class="container">
  <header>
 ?  <slot name="header"></slot>
  </header>
  <main>
 ?  <slot></slot>
  </main>
  <footer>
 ?  <slot name="footer"></slot>
  </footer>
</div>

向具名插槽提供内容时，我们可以在<template>元素上使用v-slot指令，并以v-slot的参数形式提供其名称！

<base-layout>
  <template v-slot:header>
 ?  <h1>Here might be a page title</h1>
  </template>
?
  <p>A paragraph for the main content.</p>
  <p>And another one.</p>
?
  <template v-slot:footer>
 ?  <p>Here's some contact info</p>
  </template>
</base-layout>

渲染的结果如下：

<div class="container">
  <header>
 ?  <h1>Here might be a page title</h1>
  </header>
  <main>
 ?  <p>A paragraph for the main content.</p>
 ?  <p>And another one.</p>
  </main>
  <footer>
 ?  <p>Here's some contact info</p>
  </footer>
</div>

（2）作用域插槽

当我们想让插槽内容能够访问子组件中才有的数据时，例如：有一个子组件<current-user>，我们想在父组件<span>中使用<current-user>中的数据，步骤如下：

<current-user>
  {{ user.firstName }}
</current-user>

为了让 user 在父级的插槽内容中可用，我们可以将 user 作为 <slot> 元素的一个 attribute 绑定上去：

<span>
  <slot v-bind:user="user">
 ?  {{ user.lastName }}
  </slot>
</span>

绑定在 <slot> 元素上的 attribute 被称为插槽 prop。

现在在父级作用域中，我们可以使用带值的 v-slot 来定义我们提供的插槽 prop 的名字：

<current-user>
  <template v-slot:default="slotProps">
 ?  {{ slotProps.user.firstName }}
  </template>
</current-user>