官方對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"