vue插槽详解

vue 插槽

vue 插槽是沟通父子组件排版内容的分发

通常都是在父组件中写内容,在子组件中写插槽预留位置

若是不写插槽会怎样?那么夹在根标签的内容都不会显示出来

插槽

匿名插槽

最简单,只须要在父组件中预留HTML,在子组件中写slot就好

父组件

<template>
    <div class="father">
        <h3>这里是父组件</h3>
        <child>
            <div class="tmpl">
              <span>菜单1</span>
              <span>菜单2</span>
              <span>菜单3</span>
              <span>菜单4</span>
              <span>菜单5</span>
              <span>菜单6</span>
            </div>
        </child>
    </div>
</template>

子组件

<template>
    <div class="child">
        <h3>这里是子组件</h3>
        <slot></slot>
    </div>
</template>

渲染结果以下:

具名插槽:

在子组件中写 <slot name="xxx">

在父组件中写 slot="xxx"

父组件

<template>
  <div class="father">
    <h3>这里是父组件</h3>
    <child>
      <div class="tmpl" slot="up">
        <span>菜单1</span>
        <span>菜单2</span>
        <span>菜单3</span>
        <span>菜单4</span>
        <span>菜单5</span>
        <span>菜单6</span>
      </div>
      <div class="tmpl" slot="down">
        <span>菜单-1</span>
        <span>菜单-2</span>
        <span>菜单-3</span>
        <span>菜单-4</span>
        <span>菜单-5</span>
        <span>菜单-6</span>
      </div>
      <div class="tmpl">
        <span>菜单->1</span>
        <span>菜单->2</span>
        <span>菜单->3</span>
        <span>菜单->4</span>
        <span>菜单->5</span>
        <span>菜单->6</span>
      </div>
    </child>
  </div>
</template>

子组件:

<template>
  <div class="child">
    // 具名插槽
    <slot name="up"></slot>
    <h3>这里是子组件</h3>
    // 具名插槽
    <slot name="down"></slot>
    // 匿名插槽
    <slot></slot>
  </div>
</template>

渲染结果

做用域插槽

做用域插槽 比前面的多了一个功能能 ,我能够在子组件的做用域绑定数组啦

<slot name="up" :data="data"></slot>
 export default {
    data: function(){
      return {
        data: ['zhangsan','lisi','wanwu','zhaoliu','tianqi','xiaoba']
      }
    },
}

因而状况就变成啦,样式父组件说了算，但内容能够显示子组件插槽绑定的。

父组件:

<template>
  <div class="father">
    <h3>这里是父组件</h3>
    <!--第一次使用：用flex展现数据-->
    <child>
      <template slot-scope="user">
        <div class="tmpl">
          <span v-for="item in user.data">{{item}}</span>
        </div>
      </template>
​
    </child>
​
    <!--第二次使用：用列表展现数据-->
    <child>
      <template slot-scope="user">
        <ul>
          <li v-for="item in user.data">{{item}}</li>
        </ul>
      </template>
​
    </child>
​
    <!--第三次使用：直接显示数据-->
    <child>
      <template slot-scope="user">
       {{user.data}}
      </template>
​
    </child>
​
    <!--第四次使用：不使用其提供的数据, 做用域插槽退变成匿名插槽-->
    <child>
      我就是模板
    </child>
  </div>
</template>

子组件

<template>
  <div class="child">
​
    <h3>这里是子组件</h3>
    // 做用域插槽
    <slot  :data="data"></slot>
  </div>
</template>
​
 export default {
    data: function(){
      return {
        data: ['zhangsan','lisi','wanwu','zhaoliu','tianqi','xiaoba']
      }
    }
}

渲染结果:

参考文章:http://www.javashuo.com/article/p-npiplmpf-dm.html