vue中slot插槽功能

责编:menVScode 2018-01-28 22:51 阅读(1281)

        vue中slot插槽功能,其实也是父组件给子组件传递信息的一个过程。使用一种方式混合父组件的内容与子组件自己的模板,这种过程被称为“内容分发”。在子组件中使用特殊的<slot>元素作为内容的插槽。

        这样会使组件的可扩展性更强。

        1、单个slot

        在子组件模板中有slot标签,被视为备用内容,在父组件不提供内容的情况下使用。如果父组件提供内容,则把整个内容片段插入到slot所在的DOM位置,并替换掉slot标签本身。

        (1)若没有使用slot情况下:comp-a标签的内容不会被渲染出来。

        父组件

<template>
  <div id="app">
    <comp-a @my-event="onComaMyEvent" :number-to-do="myValue">
      <div>没有使用slot</div>
    </comp-a>
  </div>
</template>

        子组件

//子组件:compA
<template>
    <div>子组件内容</div>
</template>

        (2)单个slot的情况

        父组件

<template>
  <div id="app">
    <comp-a @my-event="onComaMyEvent" :number-to-do="myValue">
      <div>使用单个slot</div>
    </comp-a>
  </div>
</template>

        子组件

<template>
    <div>
        <!--<slot><div>默认内容</div></slot>-->
        <slot></slot>
        <div>子组件内容</div>
    </div>
</template>

        父组件提供的内容,会把内容片段插到slot标签所在的位置,如果slot标签内有默认内容,则会被覆盖。


        2、具名slot

        <slot>元素可以对应一个特殊的属性 name 来配置如何分发内容。可以使用一个匿名的slot,处理那些没有对应slot的内容。

        (1)第一种方式

        父组件

<template>
  <div id="app">
    <!--<input type="text" v-model="myValue">-->
    <comp-a @my-event="onComaMyEvent" :number-to-do="myValue">
      <div slot="header">提示</div>
      <div slot="body">使用了具名slot</div>
      <div slot="footer">关闭</div>
    </comp-a>
  </div>
</template>

        子组件

<template>
    <div>
        <slot name="header">default header</slot>
        <slot name="body">default body</slot>
        <slot name="footer">default footer</slot>
        <slot></slot>
    </div>
</template>

        (2)使用内置的template标签进行批量插入替换

        父组件

<template>
  <div id="app">
    <!--<input type="text" v-model="myValue">-->
    <comp-a @my-event="onComaMyEvent" :number-to-do="myValue">
      <div slot="header">提示</div>
      <template slot="body">
        <ul><li>1111</li> <li>2222</li></ul>
      </template>
      <div slot="footer">关闭</div>
    </comp-a>
  </div>
</template>
标签: slot vue
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码