template functional

1.functional 是什么？

它是函数式组件的一个标记，如果一个组件没有管理任何状态，也没有监听任何传递给它的状态，没有声明周期方法。实际上，它只是接收一些props的函数，在这种场景下，我们可以将组件标记为functional，这意味着它无状态(没有响应式数据)，也没有实例(没有this上下文)；其实函数式组件只是一个函数，它的渲染开销比较低。

 

2.fucntional怎么使用

如果要声明一个组件为函数式组件，只需要在template标签中添加functional属性即可。如果该组件中需要接受父组件通过props传递过来的数据，需要通过props.数据名 来获取

 

 

使用案例一

<template functional>
  <div style="padding:30px;">
    <el-alert :closable="false" title="menu 1-2-1" type="warning" />
  </div>
</template>

 

使用案例二

<template functional>
  <div>{{ props.name }}</div>
</template>

 

vue官网解释---https://cn.vuejs.org/v2/guide/render-function.html#%E5%87%BD%E6%95%B0%E5%BC%8F%E7%BB%84%E4%BB%B6

参考---https://blog.csdn.net/qq_35366269/article/details/102456270