動態元件與v once指令

1、動態元件(component)：根據is裡面資料的變化自動載入不同的元件

<

template
>
<
div 
class
="main-box"
>
<
div 
class
="box"
><

component 
:is="type"
>
component
><
el-button 
type
="primary"
@click
="handlebtnclick"
>change
el-button
>
div>
div>
template
>
<
script
>
import childone from 
'@/components/childone.vue
'import childtwo from 
'@/components/childtwo.vue
'export 
default
, data() 
},methods: 
},}script
>

2、v-once指令：提高靜態內容展示的效率

父元件：

<

div 
class
="box"
>
<
childone 
v-if
="type === 'child-one'"
/>
<
childtwo 
v-if
="type === 'child-two'"
/>
<
el-button 
type
="primary"
@click
="handlebtnclick"
>change
el-button
>
div>

子元件寫法：

<

template
>
<
div 
v-once
>
<
p class
="size14"
>子元件 一
p>
div>
template
>

【注】動態元件(component)的方法每一次切換，都是銷毀乙個元件載入另乙個元件，在一定程度上是比較耗費效能的。

v-once指令，將元件直接放進記憶體，每一次切換不銷毀元件，直接從記憶體中拿出歷史載入過的元件。

Vue動態元件與v once指令

動態元件 動態元件會根據is屬性 is屬性的值是元件名 資料的變化動態自動載入不同的元件，下面這段 就是通過動態元件實現了乙個toggle的功能 root type component handleclick change button div vue.component child one vue...

vue學習筆記之動態元件和v once指令簡單示例

點選按鈕時，自動切換兩個元件 當點選按鈕之後，會自動清除原來的元件，顯示新的元件。每一次切換，都需要銷毀 建立 但是這樣消耗有點大，所以我們在子元件中引用了v once指令，這樣可以將顯示在頁面中的元件存到記憶體中，不會完全銷毀。動態元件和v once指令 程式設計客棧 執行結果 感興趣的朋友可以使...

Vue Keep alive與動態元件

具體內容請將 複製到html檔案中 ul.active style class active index active v for item,index in arr click tabc item,index li ul container 用來渲染動態元件的標籤 可以通過is屬性繫結不同的元件來...