slot分发内容

2019独角兽企业重金招聘Python工程师标准>>>

slot元素作为组件模板之中的内容分发插槽。这个元素自身将被替换。

有 name 特性的 slot 称为具名 slot。 有 slot 特性的内容将分发到名字相匹配的具名 slot。

内容分发就是指混合父组件的内容与子组件自己的模板

先说最简单的，不具名slot

子组件

<template>
  <div>
      <slot></slot>
  </div>
</template>

父组件

<template>
  <div>
    <game>
      <div>
        覆盖slot的内容
      </div>
    </game>
  </div>
</template>

子组件只有一个slot的标签，如果父组件在子组件的标签内有内容的话，默认会替换掉子组件的标签

 

以下主要使用具名slot

子组件代码

<template>
    <div>
      <slot name="k1">slot默认的内容</slot>
    </div>
</template>

这里定义了一个名字为k1的slot，

父组件调用

<template>
  <div>
    <game>
      <div slot="k1">
        覆盖slot的内容
      </div>
    </game>
  </div>
</template>

这里的用法比较正规，就是父组件通过slot覆盖掉子组件slot标记的DOM，如果父组件没有覆盖的话，子组件的slot部分是可以显示的

 

 

转载于:https://my.oschina.net/carbenson/blog/2986203