Vue動態元件component標籤的用法大全

2022-08-20 14:00:12

簡介

說明

本文介紹Vue的動態元件的用法。

在Vue中，可以通過component標籤的is屬性動態指定標籤，例如：

<component :is="componentName"></component>

此時，componentName的值是什麼，就會引入什麼元件。

官網網址

https://v2.cn.vuejs.org/v2/guide/components.html

範例

路由設定

router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Parent from '../components/Parent'
 
Vue.use(VueRouter)
 
const routes = [
  {
    path: '/',
    name: 'Parent',
    component: Parent
  }
]
 
const router = new VueRouter({
  routes
})
 
export default router

父元件

components/Parent.vue

<template>
  <div class="outer">
    <h2>這是父元件</h2>
    <component :is="componentName" :propA="propAValue"></component>
  </div>
</template>
 
<script>
import ChildA from './ChildA'
import ChildB from './ChildB'
 
export default {
  name: 'Parent',
  components: { ChildA, ChildB },
  data () {
    return {
      componentName: 'ChildB',
      propAValue: 'aaa'
    }
  }
}
</script>
 
<style scoped>
.outer {
  margin: 20px;
  border: 2px solid red;
  padding: 20px;
}
</style>

子元件

components/ChildA.vue

<template>
  <div class="outer">
    <h3>這是ChildA</h3>
    <div>傳入進來的propA值為：{{propA}}</div>
  </div>
</template>
 
<script>
export default {
  name: 'ChildA',
  props: ['propA']
}
</script>
 
<style scoped>
.outer {
  margin: 20px;
  border: 2px solid blue;
  padding: 20px;
}
</style>

components/ChildA.vue

<template>
  <div class="outer">
    <h3>這是ChildB</h3>
    <div>傳入進來的propA值為：{{propA}}</div>
  </div>
</template>
 
<script>
export default {
  name: 'ChildB',
  props: ['propA']
}
</script>
 
<style scoped>
.outer {
  margin: 20px;
  border: 2px solid blue;
  padding: 20px;
}
</style>

測試

存取：http://localhost:8080/

到此這篇關於Vue動態元件component標籤的用法大全的文章就介紹到這了,更多相關Vue--動態元件component標籤內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！

Vue動態元件component標籤的用法大全

目錄

簡介

說明

官網網址

範例

路由設定

父元件

子元件

熱門文章