37、slot

作为对Component的补充,Vuejs 增加了 Slot 这个功能.

普通的Slot

我们从具体的例子来说明。

<html> 
<head> 
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> 
</head> 
<body> 
    <div id='app'> 
        <study-process> 
            我学习到了Slot 这个章节。 
        </study-process> 
    </div> 
    <script> 
        Vue.component('study-process', { 
          data: function () { 
            return { 
              count: 0 
            } 
          }, 
          template: '<div><slot></slot></div>' 
        }) 
        var app = new Vue({ 
            el: '#app', 
            data: { 
            } 
        }) 
    </script> 
</body> 
</html> 

从上面的代码从,我们可以看到,我们先是定义了一个 component:

Vue.component('study-process', { 
  data: function () { 
    return { 
      count: 0 
    } 
  }, 
  template: '<div><slot></slot></div>' 
}) 

在这个component的template中,是这样的:

template: '<div><slot></slot></div>' 

这里就使我们定义的 slot.

然后,我们在调用这个 component的时候,这样:

<study-process> 
    我学习到了Slot 这个章节。 
</study-process> 

所以,“我学习到了Slot 这个章节。”就好像一个参数那样传入到了 component中, component 发现自身已经定义了 slot, 就会把这个字符串放到slot的位置,然后显示出来。

如下图所示:

 

named slot

也就是带有名字的slot .

很多时候我们可能需要多个slot. 看下面的例子:

<html> 
<head> 
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> 
</head> 
<body> 
    <div id='app'> 
        <study-process> 
            <p slot='slot_top'> 
                Vuejs 比起别的框架真的简洁好多! 
            </p> 

                我学习到了  Slot 这个章节。 

            <h5 slot='slot_bottom'> 
                再也不怕H5 项目了~ 
            </h5> 
        </study-process> 
    </div> 
    <script> 
        Vue.component('study-process', { 
          template: '<div>' + 
          '<slot name="slot_top"></slot>' + 
          '<slot></slot>' + 
          '<slot name="slot_bottom"></slot>' + 
          '</div>' 
        }) 
        var app = new Vue({ 
            el: '#app', 
            data: { 
            } 
        }) 
    </script> 
</body> 
</html> 

上面的代码中, 我们定义了这样的 component:

Vue.component('study-process', { 
  template: '<div>' + 
  '<slot name="slot_top"></slot>' + 
  '<slot></slot>' + 
  '<slot name="slot_bottom"></slot>' + 
  '</div>' 
}) 

其中的<slot name="slot_top"></slot> 就是一个named slot (具备名字的slot) ,这样,在后面对于 component的调用中:

<p slot='slot_top'> 
    Vuejs 比起别的框架真的简洁好多! 
</p> 

就会渲染在对应的位置了。

slot 的默认值

我们可以为 slot 加上默认值。这样当 “父页面” 没有指定某个slot的时候,就会显示这个默认值了。

例如:

<slot name="slot_top">这里 top slot的默认值 </slot> 

版权声明:「DDKK.COM 弟弟快看,程序员编程资料站」本站文章,版权归原作者所有