關於Vue - component 屬性is的一點使用方法心得


官方對component 的屬性 is的解釋: 有的時候,在不同組件之間進行動態切換是非常有用的,可以通過 Vue 的 <component> 元素加一個特殊的 is attribute 來實現、

拿我們自己話來說就是  多個組件使用同一個掛載點,並動態切換,並且IS屬性就是這個組件的“name”值很好理解。

話說這個屬性其實挺實用的,比如說我們的創建某個活動之類,需要按步驟創建3步,為了代碼的簡潔,首先我們想到肯定用組件方式來進行每一步管理,每一步獨立起來,方便管理。可讀性也高。下面我就按照我工作中代碼復述一片。PS: 我用的UI庫是iview

一、沒有用component中is的寫法,是不是很繁瑣?

只有通過v-if來控制每一步的組件。(其他自定義屬性就不多說了,是業務屬性)

 

二、通過component 組件形式來書寫

子組件的prop值,同樣可以通過<component ></component >這個組件來傳遞。相當於是每個子組件的公共部分。

我這里邏輯是只需要監控這個nowCurrent這個值 ,通過子組件里changeStep回調來改變nowCurrent值,從而切換組件。 相比於第一種方式是不是很簡潔?

 

 

 

 

 

 

PS:  你用這個模式可能會出現這個錯誤

[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available

這是由於vue有兩種模式構建 ,在初始化項目配置的時候,有兩個運行環境配置的版本:Compiler 版本、Runtime 版本。

如果你是vue-cli 是2.x版本  可以在配置項加一段話即可,如下圖:

vue$: "vue/dist/vue.esm.js"

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM