插槽slot/非父子通信

认识插槽

在开发中，会经常封装一个个可以复用的组件。 为了让组件具备更强的通用性，不能将组件中的内容限制为固定的div,span等元素。 在某些情况下，我们使用组件，希望组件显示的是一个按钮，某种情况下我们使用组件希望的是一张图片。 我们应该让使用者决定某一块区域到底存放什么内容和元素。

定义插槽

插槽的使用过程其实是抽取共性，预留不同。 将共同的元素，内容依然在组件内进行封装，同时会将不同的元素使用slot作为占位，让外部决定显示什么样的元素。

插槽的使用

普通插槽

父组件
<template>
  <div>
    <!-- 默认里面没有内容，就显示默认内容 -->
    <Slot></Slot>

    <div>-------------</div>

    <!-- 里面有内容，就显示写的内容 -->
    <Slot>
      <input type="checkbox">男
    </Slot>
  </div>
</template>

<script>
import Slot from "./components/slot";
  export default {
    components:{
      Slot
    }
  }
</script>

<style scoped>

</style>

子组件
<template>
  <div>
    <h2>{{ msg }}</h2>
    <slot>
      <h1>我是默认slot，没有内容就是我</h1>
    </slot>
  </div>
</template>

<script>
  export default {
    data(){
      return{
        msg:"我是子组件"
      }
    },
}
</script>

<style scoped>

</style>

具名插槽

默认插槽的name都是default，但是有时候我们要确定插槽具体的位置。所以给插槽取名字，对应的名字放在对应的位置上。

v-slot:简写可以写成#

父组件
<template>
  <tabNav>
    <template v-slot:left>
      <h2>left1</h2>
    </template>

    <template #center>
      <h2>center1</h2>
    </template>

    <template v-slot:right>
      <h2>right1</h2>
    </template>
  </tabNav>
</template>

<script>
import tabNav from "./tabNav";
  export default {
    components:{
      tabNav
    }
}
</script>

<style scoped>

</style>

子组件
<template>
  <div>
    <div>tabNav</div>
    <div>
      <slot name="left">
        <span>left</span>
      </slot>
      <slot name="center">
        <span>center</span>
      </slot>
      <slot name="right">
        <span>right</span>
      </slot>
    </div>
  </div>
</template>

<script>
  export default {

}
</script>

<style scoped>
span{
  display: inline-block;
  width: 50px;
  height: 30px;
  margin: 20px;
}
</style>