自定义组件
自定义组件
自定义组件是 Vue 中非常重要的概念,它允许我们将一块功能独立的代码封装成一个可复用的组件,并在应用中多处使用。Vue 3 提供了更加简洁、灵活的方式来创建和使用组件
如何创建
新建一个 MyComponent.vue 文件,内容如下:
vue
<template>
<div>
<h1>自定义组件</h1>
<MyComponent />
</div>
</template>
<script setup>
import MyComponent from "./MyComponent.vue";
</script>
通过 <script setup>
,导入的组件都在模板中直接可用
vue
<template>
<div>
<h1>自定义组件</h1>
<MyComponent />
</div>
</template>
<script setup>
import MyComponent from "./MyComponent.vue";
</script>
全局注册
在 Vue3 中,我们可以使用 app.component
方法来全局注册组件,或者使用 app.component('MyComponent', MyComponent)
来局部注册组件。
全局注册:
javascript
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
是一个动态的值,可以是字符串(组件的名字)也可以是一个组件对象。
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>
vue
<script setup></script>
<template>
<div>
<p>CompA</p>
</div>
</template>
vue
<script setup></script>
<template>
<div>
<p>CompB</p>
</div>
</template>