暂存变量的函数式组件

你在写项目的时候有没有遇到这种情况，在标签内的同个模块中，会遇到一个需要计算出来的值，用在多个标签的情况吗？除了用computed、watch之外，还有什么更简洁的方法吗？

有没有想过在标签内定义一个变量呢？只定义一次，然后重复使用。

可以通过render函数式组件，直接返回组件上作用域插槽的值来实现

// TempVar.js
export default {
  functional: true,
  render: (h, ctx) => {
    return ctx.scopedSlots.default && ctx.scopedSlots.default(ctx.props || {})
  }
}

在组件上面绑定对应的值，即可在组件内当做变量来使用

<TempVar
  :var1="`hello ${name}`"
  :var2="destroy ? 'hello' : 'hi"
>
  <template v-slot="{var1, var2}">
    {{var1}}
    {{var2}}
  </template>
</TempVar>