vue-插槽

内容分发的工具

1.匿名插槽

//compontent
<template>
  <div class="slot">
    <slot></slot>
  </div>
</template>


// parent
  <slotComponten>
      内容
    </slotComponten>
//效果 组件的slot展示得就是 “ 内容”

2.具名插槽

//compontent
<template>
  <div class="slot">
    <slot></slot>
    <br />
    <slot name="content"></slot>
  </div>
</template>


//parent 
<slotHasName>
      <template v-slot:default>
        具名插槽 默认
      </template>
      <template v-slot:content>
        插槽名内容
      </template>
    </slotHasName>

效果：
具名插槽 默认 
插槽名内容

3.作用域插槽

 

//parent 这里obj 和foo 在父组件中都没有 
<slotArea>
      <template v-slot:default="obj">{{ obj.foo }}</template>
    </slotArea>


//component
<template>
  <div class="slot">
    <slot :foo="foo"></slot>
  </div>
</template>

<script>
export default {
  name: "slotArea",

  data() {
    return { foo: "子组件的数据" };
  }
};
</script>

//效果
子组件的数据

　　正常来说foo 在parent中是访问不到的，foo是component中的数据，但是{{ obj.foo }}是在parent中渲染的，为了让foo在parent可以被访问，将foo作为component的属性绑定上去 可以取到obj 为一个对象 里面有component绑定的数据foo ，通过obj.foo取到了值，并展示出来。