内置特殊元素

在 Vue3 中的内置特殊元素, <component>元素可以根据动态变量来动态切换组件的渲染，<slot>元素可以在组件中定义可插入的内容，并在父组件中进行替换，<template>元素则可以用来包裹多个元素或者作为条件渲染和循环的容器。

在 Vue3 中的特殊属性（Attributes），key属性用于为列表中的每个元素提供唯一标识符，以便 Vue 能够高效地更新 DOM；ref属性允许我们在模板和 JavaScript 之间建立引用的连接，方便我们操作 DOM 元素或组件；is属性在动态组件中用于指定要渲染的组件类型。

特殊元素

1. `<component>`元素

<component>元素是 Vue 中的动态组件，它可以在模板中根据不同的组件名称动态切换渲染的组件。下面是一个示例：

vue

<template>
  <component :is="currentComponent"></component>
</template>

<script setup>
import ComponentA from "./ComponentA.vue";
import ComponentB from "./ComponentB.vue";

let currentComponent = "ComponentA";

setTimeout(() => {
  currentComponent = "ComponentB";
}, 2000);
</script>

在上面的代码中，我们通过使用:is属性将currentComponent变量绑定到<component>，根据currentComponent的值来决定渲染哪个组件。初始情况下，会渲染ComponentA组件，2 秒后切换为ComponentB组件。

需要注意的是，动态组件的名称可以是组件的实例或者组件的选项对象。另外，当使用动态组件时，可以通过设置keep-alive来缓存组件，以提高性能。

2. `<slot>`元素

<slot>元素是 Vue 中的插槽，它可以用于在组件中定义可插入的内容，并在组件的模板中进行占位。下面是一个示例：

vue

<template>
  <div>
    <h1>这是一个插槽示例</h1>
    <slot></slot>
  </div>
</template>

<script setup>
// 父组件模板中：
// <Component>
//   <p>插入的内容</p>
// </Component>
</script>

在上面的代码中，<slot>元素将会在组件的模板中占位，并且可以通过父组件中插入的内容进行替换。在父组件中，我们可以像使用普通 HTML 标签一样使用自定义组件，并在其中插入内容。

需要注意的是，<slot>元素可以具有默认插槽内容。如果没有在父组件中插入内容，则会显示默认插槽内容。

3. `<template>`元素

在 Vue 中，<template>元素通常用来包裹多个元素或者作为条件渲染和循环的容器。下面是一个示例：

vue

<template>
  <div>
    <h1>条件渲染示例</h1>
    <template v-if="show">
      <p>显示的内容</p>
    </template>
    <template v-else>
      <p>隐藏的内容</p>
    </template>
  </div>
</template>

<script setup>
let show = true;

setTimeout(() => {
  show = false;
}, 2000);
</script>

特殊 Attributes

1. key 属性

key属性在 Vue3 中是一个特殊的属性，它用于在列表渲染时为每个元素提供唯一的标识符。下面是一个示例：

vue

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

<script setup>
const items = [
  { id: 1, name: "Item 1" },
  { id: 2, name: "Item 2" },
  { id: 3, name: "Item 3" },
];
</script>

在上面的代码中，我们使用v-for指令对items数组进行遍历，在每个li元素上添加了:key="item.id"属性，其中item.id作为每个元素的唯一标识符。

需要注意的是，当使用v-for进行列表渲染时，key是必需的。它帮助 Vue 跟踪每个元素的身份，以便在添加、删除或重新排序时高效地更新 DOM。

2. ref 属性

ref属性允许我们在模板中通过一个唯一的标识符引用一个元素或组件，并且可以在 JavaScript 中进行访问。下面是一个示例：

vue

<template>
  <div>
    <p ref="paragraph">这是一个段落</p>
    <button @click="changeText">改变文本</button>
  </div>
</template>

<script setup>
import { ref } from "vue";

const paragraph = ref(null);

function changeText() {
  paragraph.value.textContent = "文本已改变";
}
</script>

在上面的代码中，我们使用ref="paragraph"为<p>元素添加了 ref 属性，并使用const paragraph = ref(null)在 JavaScript 中创建了一个响应式引用。

需要注意的是，使用ref属性需要在 Vue3 中导入ref函数，通过ref(value)将一个普通的数据转化为响应式引用。同时，在 JavaScript 中通过访问value属性可以获取到实际的 DOM 元素。

3. is 属性

is属性在 Vue3 中是一个特殊的属性，它主要用于在动态组件中指定要渲染的组件类型。下面是一个示例：

vue

<template>
  <component :is="currentComponent"></component>
  <button @click="changeComponent">切换组件</button>
</template>

<script setup>
import ComponentA from "./ComponentA.vue";
import ComponentB from "./ComponentB.vue";

let currentComponent = "ComponentA";

function changeComponent() {
  currentComponent =
    currentComponent === "ComponentA" ? "ComponentB" : "ComponentA";
}
</script>

内置特殊元素 ​

特殊元素 ​

1. <component>元素 ​

2. <slot>元素 ​

3. <template>元素 ​

特殊 Attributes ​

1. key 属性 ​

2. ref 属性 ​

3. is 属性 ​