关于vue slot 的多级传递使用
关于vue slot 的多级传递使用关于slot 以及scope-slot的基本使用,官方文档已经有了详细的介绍:点击这里查看,这里就不复述了。但是在实际的使用过程中,常常会出现外部组件内容需要多级嵌套传递到目标组件,那么slot可以如何实现呢?现在假设有A,B,C三个组件,层级关系为A>B>C(爷爷,父亲,儿子)C:<div&am
·
关于vue slot 的多级传递使用
关于slot 以及scope-slot的基本使用,官方文档已经有了详细的介绍:点击这里查看,这里就不复述了。
但是在实际的使用过程中,常常会出现外部组件内容需要多级嵌套传递到目标组件,那么slot可以如何实现呢?
现在假设有A,B,C三个组件,层级关系为A>B>C(爷爷,父亲,儿子)
C:
<div>
C组件
<div>
<slot name="pane" :data="我是C">我是c组件(儿子)---外部没传递,我才显示</slot>
</div>
</div>
B:
<div>
B组件---这是一个中间传递的slot
<C>
<div slot="pane" slot-scope="{data}">
<slot name="pane" :data="data"></slot>
</div>
</C>
</div>
A:
<div>
A组件
<B>
<div slot="pane" slot-scope="{data}">
{{data}}注意,我要传到C了
</div>
</B>
</div>
其他扩展用法跟此类似
更多推荐
已为社区贡献7条内容
所有评论(0)