vue <template>與react<></>標簽

vue2中的<template></template>標簽 與 react中的<></>標簽類似，在編譯后渲染時不會產(chǎn)生DOM實體。(我們把它們都稱為空標簽)

在vue2中，<template></template>標簽會用來作為組件的根標簽(template, script, style三段式中的template)。在<template>作為根標簽之外，<template>也可以做為普通的標簽使用。作為根標簽、作為普通標簽使用的<template>在頁面上均不會產(chǎn)生DOM實體。

在React中，<></>是React中的Fragment語法，用于將多個React元素組合在一起，或者三元運算符中空標簽的占位。<></>也不會產(chǎn)生DOM實體。

相同點

1、兩者都可以用來包裹組件的內(nèi)容，也可以用來定義組件模板。

2、兩者都支持嵌套使用，可以用來創(chuàng)建復雜的組件結(jié)構(gòu)。

3、兩者都支持使用條件渲染和循環(huán)渲染等功能。

不同點

1、作為根標簽使用時，在 Vue2 中，組件必須包含唯一一個根元素，因此 <template></template> 標簽內(nèi)部只能有一個產(chǎn)生DOM實體的元素。

<template>  ←根標簽
  <div></div>
  <span></span>
</template>

↑這種方式編譯不通過，會提示"Component template should contain exactly one root element." 這里有<div></div> <span></span> 兩個同級的DOM元素，違背了唯一根元素的要求。

<template>  ←根標簽
  <template> ←root element
  </template>
</template>

↑這種方式編譯也不通過，會提示"Cannot use <template> as component root element because it may contain multiple nodes." 作為root element的<template>可能含有多個子DOM實體，這是vue2不允許的。

而在 React 中，<></>內(nèi)部可以有多個同級的元素，沒有vue2<template>這么多限制。

return (
  <>
    <div></div>
    <span></span>
  </>
)

↑這里的代碼沒問題。

此外

在vue中使用<template></template>標簽，需要注意vue實例綁定的元素內(nèi)部(<div id="app"></div>內(nèi)部)的template標簽不支持v-show指令(即v-show="false"對template標簽來說不起作用)。但v-if、v-else-if、v-else是可用的。

在react中使用<></>標簽不可以傳遞鍵值或?qū)傩浴?/p>

由于空標簽在編譯后渲染時不會產(chǎn)生html實體，如果空標簽的子元素需要繼承父元素高度，直接寫height: 100%; 就可以，而如果使用<div>之類的塊元素標簽，則塊元素標簽也需要加上height: 100%。

以上就是vue中的<template>標簽與react中的<></>標簽區(qū)別詳解的詳細內(nèi)容，更多關(guān)于vue <template>與react<></>標簽的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論