老师$slots.left是什么? 之前哪里定义过de ? 能否讲解一下这个插槽<slot> 不懂啊

来源:1-2 Navbar 组件--基础组件开发

你要去哪

2020-02-24 05:12:53

<div class="mine-navbar-left" v-if="$slots.left"> //左部图标

    <slot name="left"></slot>    


写回答

1回答

好帮手慕慕子

2020-02-24

同学你好, 对于你的问题解答如下:

  1. $slots.left就是获取名字叫left的插槽。 $slots的值是在父组件这里传递的,如下:

    http://img.mukewang.com/climg/5e533aad09f1d03910960252.jpg

  2. slot插槽的用法,简单理解就是: 在一个组件中定义<slot name="插槽名称"></slot>,在另一个组件中,就可以其他组件引入对应的组件,然后在标签中添加slot="插槽名称"使用对应的插槽。

    示例:navbar组建中的slot插槽标签取名为 left 和 right ,所以header组建在引入 navbar 组建时,就可以将icon 放入 navbar 组建中,icon 放入的方法就是 在 <i> 标签中 加入 slot="left",对应到navbar组建中slot的名字

    具体的可以参考官网理解 https://cn.vuejs.org/v2/guide/components-slots.html#ad 

如果我的回答帮助到了你,欢迎采纳,祝学习愉快~

0

0 学习 · 10739 问题

查看课程