Vue与React插槽区别

2020-10-1573次阅读Reactvue

在Vue中我们可以通过slot传递组件模板给组件,然后渲染。而React的话显然是没有插槽的概念,但其实你在组件内部中不论是写的JSX DOM 都会被传入到Props的children当中去,这就是一个类似于Vue的普通插槽的实现了。

但是往往我们可能会因为不同的插槽,做不同的事情,比如我有一个footer插槽用来改变模态框底部的内容,header用来改变顶部的内容。那么我们可以通过传入一个对象的形式进行具名插槽的一个场景模拟。同样的也会将其传递到一个Props当中去。是不是感觉非常有意思呢。

<Model>
{{
    header: <div>header slot</div>,
    footer: <div>footer slot</div>
}}
</Model>

 

上一篇: 通过JS来管理样式CSS Modules及React实践  下一篇: Mobx-State-Tree-分配给数组类型  

Vue与React插槽区别相关文章