vue動態元件的用法

2021-10-24 15:19:45 字數 996 閱讀 3098

前文

今天寫一篇關於vue元件的擴充套件用法, 之前將一些基本用法已經寫過了,沒有看過的可以自行找一下,今天要寫的是一片關於vue 官方給的動態元件的一種用法,其實這個用法的使用場景使用基本元件也是可以勝任的,只是既然有這樣一種寫法的存在,我們還是需要實現一下,網上呢關於他的用法寫的也有很多,我一般寫的文章都是最基礎的使用方法,沒有一些花裡胡哨的寫法,所以很容易看得明白!廢話不多說,上**

目錄結構

蘋果香蕉

橙子childb

}

index
顯示a元件

顯示b元件

**解析
上面三段就是實現了乙個簡單的動態元件的全部**,childa元件是第乙個子元件,childb元件是另乙個子元件,我們引入元件的時候還是一樣的import的方式,但是渲染的時候方式是直接使用component,使用:is來決定展示哪乙個元件,這裡使用keep-alive的原因呢,元件每一次渲染都是全新的,會導致乙個現象就是之前使用者的操作丟失,為了保證使用者的操作的原本性,使用快取的標籤就可以了,效果如下:

效果

Vue 動態元件

vue.js提供了乙個特殊的元素用來動態掛載不同的元件,使用is特性來選擇要掛載的元件 is current component click change a 切換到a元件button click change b 切換到b元件button click change c 切換到c元件button d...

vue 動態元件

看例子 one component div js 部分 newvue two thr 上面 註冊了三個元件,在 component 標籤裡有個屬性 is,is one,所以頁面會渲染名字叫 one 的元件,顯示結果如下 我是線路一 如果給 is 屬性繫結動態值,那麼就可以實現元件的動態切換,例子如下...

vue動態元件 非同步元件

重新建立動態元件的行為通常是非常有用的,但是在這個案例中,我們更希望那些標籤的元件例項能夠被在它們第一次被建立的時候快取下來。為了解決這個問題,我們可以用乙個元素將其動態元件包裹起來。v bind is currenttabcomponent component keep alive 注意 這個要求...