Axiu Blog
一个梳理。 ### Slot(插槽)分发内容 形式上看,Slot的设计对应了angular中的`ng-tranclude`属性,即用该方法来确定在何处放置嵌入部分。 **ng-transclude使用** _html内容_ {{msg}} _模版内容_ Here comes the message. _渲染结果_ Here comes th
插槽(Slot)是Vue提出来的一个概念,正如名字一样,插槽用于决定将所携带的内容,插入到指定的某个位置,从而使模板分块,具有模块化的特质和更大的重用性。插槽的原理和Angular中的ng-transclude十分类似,本篇也是对所学内容做一个梳理。 ### Slot(插槽)分发内容 形式上看,Slot的设计对应了angular中的`ng-tranclude`属性,即用该方法来确定在何处放置嵌
插槽(Slot)是Vue提出来的一个概念,正如名字一样,插槽用于决定将所携带的内容,插入到指定的某个位置,从而使模板分块,具有模块化的特质和更大的重用性。插槽的原理和Angular中的ng-transclude十分类似,本篇也是对所学内容做一个梳理。 ### Slot(插槽)分发内容 形式上看,Slot的设计对应了angular中的`ng-tranclude`属性,即用该方法来确定在何处放置嵌
Vue:插槽(Slot)使用
Max

插槽(Slot)是Vue提出来的一个概念,正如名字一样,插槽用于决定将所携带的内容,插入到指定的某个位置,从而使模板分块,具有模块化的特质和更大的重用性。插槽的原理和Angular中的ng-transclude十分类似,本篇也是对所学内容做一个梳理。

Slot(插槽)分发内容

形式上看,Slot的设计对应了angular中的ng-tranclude属性,即用该方法来确定在何处放置嵌入部分。

ng-transclude使用

html内容

{{msg}}

模版内容

Here comes the message.

渲染结果

Here comes the message.

{{msg}}

可以看出,形式上,Angular是把ng-transclude标签替换为要使用的模板内容。

Slot的使用

匿名slot

举个栗子,在Vue中,我们会这么写带slot的组件:

组件模板

我是子组件的标题

父组件模版

我是父组件的标题

这是一些初始内容

这是更多的初始内容

渲染结果

我是父组件的标题

我是子组件的标题

这是一些初始内容

这是更多的初始内容

对比一下,是不是和ng-transclude十分类似?Slot所做的工作,也是把父组件中的“内容”被放入了slot,并将组合后的组件模版返回到父组件。这里slot标签里的内容实际并没有显示,被当作了备用内容(只有在宿主元素为空,没有要插入的内容时才显示)。

更进一步地,Vue给出了具名Slot也作用域插槽这两个比较独特的设计。

具名slot

上面栗子中使用的是匿名slot,即该节点不携带任何其也特征信息。对应的,Vue也提供了具名slot。简单来讲,具名Slot就是会为模板中不同部分指定相应的插入位置。但是当部分内容没有找到对应的插入位置,就会依次插入匿名的slot中,当没有找到匿名slot时,这段内容就会被抛弃掉。

组件模版

... ...

父组件模版

...

Lack of anonymous slot, this paragraph will not shown.

Here comes the footer content

Here comes the header content

...

渲染结果

Here comes the header content

Here comes the footer content

Lack of anonymous slot, this paragraph will not shown.

Comments