自定义组件

自定义组件

自定义组件是 Vue 中非常重要的概念，它允许我们将一块功能独立的代码封装成一个可复用的组件，并在应用中多处使用。Vue 3 提供了更加简洁、灵活的方式来创建和使用组件

如何创建

新建一个 MyComponent.vue 文件，内容如下：

<template>
  <div>
    <h1>自定义组件</h1>
    <MyComponent />
  </div>
</template>

<script setup>
import MyComponent from "./MyComponent.vue";
</script>

通过 <script setup>，导入的组件都在模板中直接可用

<template>
  <div>
    <h1>自定义组件</h1>
    <MyComponent />
  </div>
</template>

<script setup>
import MyComponent from "./MyComponent.vue";
</script>

➡️在演练场中尝试一下

全局注册

在 Vue3 中，我们可以使用 app.component 方法来全局注册组件，或者使用 app.component('MyComponent', MyComponent) 来局部注册组件。

全局注册：

import { createApp } from "vue";
import App from "./App.vue";
import MyComponent from "./components/MyComponent.vue";

const app = createApp(App);

app.component("MyComponent", MyComponent);

app.mount("#app");

动态组件

在 Vue3 中，我们可以使用 <component :is="currentComponent"></component> 的方式来动态渲染组件。currentComponent 是一个动态的值，可以是字符串（组件的名字）也可以是一个组件对象。

App.vue

<template>
  <div>
    <h1>局部注册和动态组件</h1>
    <button @click="toggleComponent">切换组件</button>
    <component :is="tabs[current]" />
  </div>
</template>

<script setup>
import { ref } from "vue";
import CompA from "./CompA.vue";
import CompB from "./CompB.vue";
const tabs = { CompA, CompB };
const current = ref("CompA");
function toggleComponent() {
  current.value = current.value === "CompA" ? "CompB" : "CompA";
}
</script>

CompA.vue

<script setup></script>

<template>
  <div>
    <p>CompA</p>
  </div>
</template>

CompB.vue

<script setup></script>

<template>
  <div>
    <p>CompB</p>
  </div>
</template>

➡️在演练场中尝试一下