Dynamic Components का परिचय

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
  <button @click="current = 'tab-a'">A</button>
  <button @click="current = 'tab-b'">B</button>
  <component :is="current"></component>
</div>
<script>
  const app = Vue.createApp({ data() { return { current: "tab-a" }; } });
  app.component("tab-a", { template: "<p>This is tab A</p>" });
  app.component("tab-b", { template: "<p>This is tab B</p>" });
  app.mount("#app");
  document.querySelectorAll("button")[1].click();
  Vue.nextTick(() => console.log("now showing:", document.querySelector("p").textContent));
</script>
</body>
</html>

<!-- Output:
Rendered: ABThis is tab B
console: now showing: This is tab B
-->