vue插槽slot

一，匿名插槽

//父组件
<template>
    <div class="father">
        <h3>这是父组件</h3>
        <child>
            子组件显示内容
        </child>
    </div>
</template>

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

显示结果

二，具名插槽

//父组件
<template>
    <div class="father">
        <h3>这是父组件</h3>
        <child>
         <div class="item" slot="one">
            子组件显示内容one
         </div>
          <div class="item" slot="two">
            子组件显示内容two
         </div>
        </child>
    </div>
</template>

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

显示效果

三， 作用域插槽/带数据的插槽

//父组件
<template>
    <div class="father">
        <h3>这里是父组件</h3>
        <child>
          <template slot-scope="user">
	        <div class="item">
	          <span v-for="it in user.data">{{it}}</span>
	        </div>
	      </template>
        </child>
    </div>
</template>

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

 export default {
    data: function(){
      return {
        data: ['zhangsan','lisi','wanwu']
      }
    }

显示效果