vue学记笔记(九) 卡槽

卡槽 slot

一个人时,安静而丰盛.两个人时,温暖而踏实 —钱钟书

• 在使用 Vue 的时候我们有的时候希望传递的时 HTML 而不是简单的数据.这个时候就需要用到卡槽

匿名卡槽

• 不用署名就一个卡槽

• 父组件

<template>
  <div>
    <header></header>
    {{ message }}
    <Chacaoa>
      <div class="sloata">
        <p>A里面的数据</p>
      </div>
    </Chacaoa>
  </div>
</template>

<script>
  import Header from '@/components/common/Header'
  import Chacaoa from '@/components/common/Sloata'
  export default {
    data() {
      return {
        message: '首页',
      }
    },
    components: {
      Header,
      Chacaoa,
    },
  }
</script>

<style lang="less" scoped>
  .sloata {
    width: 300px;
    height: 100px;
    background: blue;
    color: yellow;
  }
</style>

• 子组件

<template>
  <div>
    <slot></slot>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        message: '子组件',
        dataA: 'dataA里面的数据',
        dataB: 'dataB里面的数据',
      }
    },
  }
</script>

<style lang="less" scoped></style>

具名卡槽

• 我们有的时候需要的不仅仅时一个卡槽而是非常多的卡槽,这个时候就需要具名

<template>
  <div>
    <header></header>
    {{ message }}
    <Chacaoa>
      <div class="sloata" slot="kaocaoa">
        <p>A里面的内容</p>
      </div>
      <div class="sloatb" slot="kaocaob">
        <p>B里面的内容</p>
      </div>
    </Chacaoa>
  </div>
</template>

<script>
  import Header from '@/components/common/Header'
  import Chacaoa from '@/components/common/Sloata'
  export default {
    data() {
      return {
        message: '首页',
      }
    },
    components: {
      Header,
      Chacaoa,
    },
  }
</script>

<style lang="less" scoped>
  .sloata {
    width: 300px;
    height: 100px;
    background: blue;
    color: yellow;
  }
  .sloatb {
    width: 300px;
    height: 100px;
    background: red;
    color: black;
  }
</style>

• 子组件

<template>
  <div>
    <slot name="kaocaoa"></slot>
    <slot name="kaocaob"></slot>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        message: '子组件',
        dataA: 'dataA里面的数据',
        dataB: 'dataB里面的数据',
      }
    },
  }
</script>

<style lang="less" scoped></style>

卡槽传值

• 这里必须注意的就是只能是子组件给父组件传值.

• 父组件渲染的也是子组件提供的值用到了 slot-scope

• 父组件

<template>
  <div>
    <header></header>
    {{ message }}
    <Chacaoa>
      <div class="sloata" slot="kaocaoa" slot-scope="shuju1">
        <p>{{ shuju1.data }}</p>
      </div>
      <div class="sloatb" slot="kaocaob" slot-scope="shuju2">
        <p>{{ shuju2.data }}</p>
      </div>
    </Chacaoa>
  </div>
</template>

<script>
  import Header from '@/components/common/Header'
  import Chacaoa from '@/components/common/Sloata'
  export default {
    data() {
      return {
        message: '首页',
      }
    },
    components: {
      Header,
      Chacaoa,
    },
  }
</script>

<style lang="less" scoped>
  .sloata {
    width: 300px;
    height: 100px;
    background: blue;
    color: yellow;
  }
  .sloatb {
    width: 300px;
    height: 100px;
    background: red;
    color: black;
  }
</style>

• 子组件

<template>
  <div>
    <slot name="kaocaoa" :data="dataA"></slot>
    <slot name="kaocaob" :data="dataB"></slot>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        message: '子组件',
        dataA: 'dataA里面的数据',
        dataB: 'dataB里面的数据',
      }
    },
  }
</script>

<style lang="less" scoped></style>