前端开发那些事儿

vue3.0破坏性变化----函数式组件

2021-03-17  本文已影响0人  有一种感动叫做丶只有你懂

函数式组件仅能通过简单函数方式创建,funcational选项废弃。

函数式组件变化较大,主要有以下几点:


先来回顾一下vue2.0的函数式组件
// 子组件Functional.vue
<script>
export default {
  functional: true,
  render(h, ctx) {
    console.log(ctx);
    return h("div", ctx.data, ctx.scopedSlots.content());
  },
};
</script>

//父组件
<functional :items="[1, 2, 3, 4, 5, 6, 7, 8]">
      <p>默认...</p>
      <template v-slot:content>
        <p>content...</p>
      </template>
</functional>

看一下渲染结果

image.png
看一下子组件中ctx的输出 ,他是一个FunctionalRenderContext类型的对象
image.png
再来看一下vue3.0的函数式组件
//子组件FunctionalTest.vue
<script >
import { h } from "vue";
function Heading(props, ctx) {
  console.log(ctx);
  return h(`h${props.label}`, ctx.attrs, ctx.slots.content());
}
export default Heading;
</script>




//父组件
<functional-test label="1">
    <p>这是一段文本</p>
    <template v-slot:content> ...content </template>
</functional-test>

看一下渲染结果

image.png
看一下子组件中ctx的输出 ,所有的属性都被放到attrs里面,插槽都被放到slots里面,总之很清晰
image.png
上一篇 下一篇

猜你喜欢

热点阅读