快捷導(dǎo)航

Vue動(dòng)態(tài)組件component標(biāo)簽的用法大全

更新時(shí)間：2022年08月20日 11:47:22 作者：IT利刃出鞘

這篇文章主要介紹了Vue動(dòng)態(tài)組件component標(biāo)簽的用法,在Vue中，可以通過(guò)component標(biāo)簽的is屬性動(dòng)態(tài)指定標(biāo)簽，本文通過(guò)示例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下

簡(jiǎn)介

說(shuō)明

本文介紹Vue的動(dòng)態(tài)組件的用法。

在Vue中，可以通過(guò)component標(biāo)簽的is屬性動(dòng)態(tài)指定標(biāo)簽，例如：

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

此時(shí)，componentName的值是什么，就會(huì)引入什么組件。

官網(wǎng)網(wǎng)址

https://v2.cn.vuejs.org/v2/guide/components.html#動(dòng)態(tài)組件

示例

路由設(shè)置

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>傳入進(jìn)來(lái)的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>傳入進(jìn)來(lái)的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>

測(cè)試

訪問(wèn)：http://localhost:8080/

到此這篇關(guān)于Vue動(dòng)態(tài)組件component標(biāo)簽的用法大全的文章就介紹到這了,更多相關(guān)Vue--動(dòng)態(tài)組件component標(biāo)簽內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

Vue源碼中要const _toStr = Object.prototype.toString的原因分析
這篇文章主要介紹了Vue源碼中要const _toStr = Object.prototype.toString的原因分析,在文中給大家提到了Object.prototype.toString方法的原理,需要的朋友可以參考下
2018-12-12
vue框架編輯接口頁(yè)面下拉級(jí)聯(lián)選擇并綁定接口所屬模塊
這篇文章主要為大家介紹了vue框架編輯接口頁(yè)面實(shí)現(xiàn)下拉級(jí)聯(lián)選擇以及綁定接口所屬模塊，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-05-05
vue?element?el-select下拉滾動(dòng)加載的方法
很多朋友都遇到這樣一個(gè)問(wèn)題在使用vue+element的el-select下拉框加載返回?cái)?shù)據(jù)太多時(shí)，會(huì)造成卡頓，用戶體驗(yàn)欠佳，這篇文章主要介紹了vue?element?el-select下拉滾動(dòng)加載方法,需要的朋友可以參考下
2022-11-11
vue中怎么區(qū)分不同的環(huán)境
這篇文章主要介紹了vue中怎么區(qū)分不同的環(huán)境，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04
vue項(xiàng)目中各文件的使用說(shuō)明
這篇文章主要介紹了vue項(xiàng)目中各文件的使用說(shuō)明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-02-02
vue-cli3+echarts實(shí)現(xiàn)漸變色儀表盤組件封裝
這篇文章主要為大家詳細(xì)介紹了vue-cli3+echarts實(shí)現(xiàn)漸變色儀表盤組件封裝，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-03-03
Vue匿名插槽與作用域插槽的合并和覆蓋行為
這篇文章主要介紹了Vue基礎(chǔ)-匿名插槽與作用域插槽的合并和覆蓋行為 ,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2019-04-04
在Vue3中進(jìn)行單元測(cè)試和集成測(cè)試的操作方法
隨著越來(lái)越多的企業(yè)和開(kāi)發(fā)者選擇使用 Vue.js 構(gòu)建他們的前端應(yīng)用程序,確保代碼質(zhì)量和可靠性變得尤為重要,在本博客中,我們將深入探討如何在 Vue 3 中進(jìn)行單元測(cè)試和集成測(cè)試,并提供示例代碼來(lái)幫助您上手,需要的朋友可以參考下
2025-01-01
vue3過(guò)渡動(dòng)畫的詳解
這篇文章主要為大家詳細(xì)介紹了vue3過(guò)渡動(dòng)畫，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助
2022-02-02
Vue動(dòng)態(tài)添加表單的實(shí)現(xiàn)方法
在Vue.js應(yīng)用中,動(dòng)態(tài)表單是一個(gè)常見(jiàn)的需求,尤其是當(dāng)表單字段的數(shù)量和類型需要根據(jù)用戶輸入或系統(tǒng)狀態(tài)動(dòng)態(tài)變化時(shí),本文將詳細(xì)介紹如何在Vue中實(shí)現(xiàn)動(dòng)態(tài)表單的創(chuàng)建,并通過(guò)多個(gè)示例展示具體的實(shí)現(xiàn)方法,需要的朋友可以參考下
2024-09-09