Vue動態(tài)組件component標簽的用法大全
更新時間：2022年08月20日 11:47:22 作者：IT利刃出鞘
這篇文章主要介紹了Vue動態(tài)組件component標簽的用法,在Vue中，可以通過component標簽的is屬性動態(tài)指定標簽，本文通過示例代碼給大家介紹的非常詳細，需要的朋友可以參考下
簡介
說明
本文介紹Vue的動態(tài)組件的用法。
在Vue中，可以通過component標簽的is屬性動態(tài)指定標簽，例如：
<component :is="componentName"></component>
此時，componentName的值是什么，就會引入什么組件。
官網(wǎng)網(wǎng)址
https://v2.cn.vuejs.org/v2/guide/components.html#動態(tài)組件
示例
路由設置
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>測試
到此這篇關于Vue動態(tài)組件component標簽的用法大全的文章就介紹到這了,更多相關Vue--動態(tài)組件component標簽內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
Vue源碼中要const _toStr = Object.prototype.toString的原因分析
這篇文章主要介紹了Vue源碼中要const _toStr = Object.prototype.toString的原因分析,在文中給大家提到了Object.prototype.toString方法的原理,需要的朋友可以參考下2018-12-12
vue框架編輯接口頁面下拉級聯(lián)選擇并綁定接口所屬模塊
這篇文章主要為大家介紹了vue框架編輯接口頁面實現(xiàn)下拉級聯(lián)選擇以及綁定接口所屬模塊，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-05-05
vue?element?el-select下拉滾動加載的方法
很多朋友都遇到這樣一個問題在使用vue+element的el-select下拉框加載返回數(shù)據(jù)太多時，會造成卡頓，用戶體驗欠佳，這篇文章主要介紹了vue?element?el-select下拉滾動加載方法,需要的朋友可以參考下2022-11-11
這篇文章主要介紹了vue中怎么區(qū)分不同的環(huán)境，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了vue項目中各文件的使用說明,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-02-02
vue-cli3+echarts實現(xiàn)漸變色儀表盤組件封裝
這篇文章主要為大家詳細介紹了vue-cli3+echarts實現(xiàn)漸變色儀表盤組件封裝，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要介紹了Vue基礎-匿名插槽與作用域插槽的合并和覆蓋行為 ,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2019-04-04
隨著越來越多的企業(yè)和開發(fā)者選擇使用 Vue.js 構建他們的前端應用程序,確保代碼質(zhì)量和可靠性變得尤為重要,在本博客中,我們將深入探討如何在 Vue 3 中進行單元測試和集成測試,并提供示例代碼來幫助您上手,需要的朋友可以參考下2025-01-01
這篇文章主要為大家詳細介紹了vue3過渡動畫，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-02-02
在Vue.js應用中,動態(tài)表單是一個常見的需求,尤其是當表單字段的數(shù)量和類型需要根據(jù)用戶輸入或系統(tǒng)狀態(tài)動態(tài)變化時,本文將詳細介紹如何在Vue中實現(xiàn)動態(tài)表單的創(chuàng)建,并通過多個示例展示具體的實現(xiàn)方法,需要的朋友可以參考下2024-09-09