快捷導(dǎo)航

vue.js 動(dòng)態(tài)組件詳解

更新時(shí)間：2021年09月14日 09:57:53 作者：貓老板的豆

這篇文章主要介紹了vue.js 動(dòng)態(tài)組件詳解,本篇文章通過簡要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下

:is 動(dòng)態(tài)組件

使用 v-bind:is=”組件名”，會(huì)自動(dòng)去找匹配的組件名，如果沒有，則不顯示；

<div id="app">
    <test v-bind:is="which_to_show"></test>
</div>

<script>
    var demo = new Vue({
        el: "#app",
        data: {
            which_to_show: "first"
        },
        components: {
            first: {
                template: "<div>這里是子組件first</div>"
            },
            second: {
                template: "<div>這里是子組件second</div>"
            },
            third: {
                template: "<div>這里是子組件third</div>"
            }
        }
    });
</script>

這里寫圖片描述

通過改變 which_to_show 的值就可以動(dòng)態(tài)改變想要加載渲染的組件,如下：

這里寫圖片描述

到此這篇關(guān)于vue.js 動(dòng)態(tài)組件詳解的文章就介紹到這了,更多相關(guān)vue.js 動(dòng)態(tài)組件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

如何在vue里添加好看的lottie動(dòng)畫
這篇文章主要介紹了在vue里添加好看的lottie動(dòng)畫效果的方法，在vue中引入lottie非常簡單,需要的朋友可以參考下
2018-08-08
vue部署包可配置后臺(tái)接口地址的方法
這篇文章主要介紹了vue部署包可配置后臺(tái)接口地址的相關(guān)知識(shí)，本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2023-03-03
vue自定義封裝指令以及實(shí)際使用
市面上大多數(shù)關(guān)于Vue.js自定義指令的文章都在講語法,很少講實(shí)際的應(yīng)用場景和用例,下面這篇文章主要給大家介紹了關(guān)于vue自定義封裝指令以及實(shí)際使用的相關(guān)資料,需要的朋友可以參考下
2022-01-01
ResizeObserver?loop?limit?exceeded報(bào)錯(cuò)原因及解決方案
這篇文章主要給大家介紹了關(guān)于ResizeObserver?loop?limit?exceeded報(bào)錯(cuò)原因及解決的相關(guān)資料,公司項(xiàng)目監(jiān)聽系統(tǒng)中發(fā)現(xiàn)一個(gè)高頻錯(cuò)誤ResizeObserver loop limit exceeded,而瀏覽器的console中卻沒有提示,需要的朋友可以參考下
2023-09-09
vue中實(shí)現(xiàn)滾動(dòng)加載更多的示例
下面小編就為大家?guī)硪黄獀ue中實(shí)現(xiàn)滾動(dòng)加載更多的示例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-11-11
vue element-ui實(shí)現(xiàn)input輸入框金額數(shù)字添加千分位
這篇文章主要介紹了vue element-ui實(shí)現(xiàn)input輸入框金額數(shù)字添加千分位,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2019-12-12
vue項(xiàng)目中使用ts（typescript）入門教程
最近項(xiàng)目需要將原vue項(xiàng)目結(jié)合ts的使用進(jìn)行改造，本文從安裝到vue組件編寫進(jìn)行了說明，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-11-11
vue轉(zhuǎn)electron項(xiàng)目及解決使用fs報(bào)錯(cuò):Module?not?found:?Error:?Can&apo
這篇文章主要給大家介紹了關(guān)于vue轉(zhuǎn)electron項(xiàng)目及解決使用fs報(bào)錯(cuò):Module?not?found:?Error:?Can‘t?resolve?‘fs‘?in的相關(guān)資料,文中通過圖文以及實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-11-11
使用async-validator編寫Form組件的方法
本篇文章主要介紹了使用 async-validator 編寫 Form 組件的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-01-01
vue實(shí)現(xiàn)PC端分辨率適配操作
這篇文章主要介紹了vue實(shí)現(xiàn)PC端分辨率適配操作，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-08-08