vue中插槽slot的一些用法及作用

vue中插槽slot的一些用法及作用

//这是父组件代码
<template>
  <div class="homeSlot">
    <h2>组件1</h2>
    <use-slot-one style="background: azure;">
      {{replaceContent}}
    </use-slot-one>

    <h2>组件2</h2>
    <use-slot-two style="background: beige;">
      <template v-slot:header>
        {{replaceHeader}}
        <use-slot-one>{{replaceContent}}</use-slot-one>
      </template>
      <template v-slot:main>
        {{replaceMain}}
      </template>
      <template #footer>
        <p>#footer具名插槽的缩写</p>
        {{replaceFooter}}
      </template>
      <template v-slot:default>
        {{replaceContent +'匹配内容'}}
      </template>
      除了template中的匹配内容
    </use-slot-two>

    <h2>组件3</h2>
    <use-slot-three style="background: lightblue;">
      <!--这里前三个template中的内容实现的效果相同，只不过后者会覆盖前者-->
      <template v-slot:default="slotProps">
        <h5>独占默认插槽写法</h5>
        {{slotProps.user.lastName}}
      </template>
      <template v-slot="slotProps">
        <h5>独占默认插槽的缩写语法</h5>
        {{slotProps.user.firstName}}
      </template>
      <template v-slot="{user}">
        <h5>解构式写法</h5>
        {{user.fullName}}
      </template>

      <template v-slot:other="otherSlotProps">
        slotProps is NOT available here
      </template>
    </use-slot-three>
  </div>
</template>

<script>
//引入子组件
  import UseSlotOne from './UseSlotOne';
  import UseSlotTwo from './UseSlotTwo';
  import UseSlotThree from './UseSlotThree'

  export default {
    name: "HomeSolt",
    //注册子组件
    components: {
      UseSlotOne,
      UseSlotTwo,
      UseSlotThree
    },
    data() {
      return {
        replaceContent: '这是将要用来替换solt默认内容的部分',
        replaceHeader: '这是将要用来替换头部默认内容的部分，此处可以是一个组件',
        replaceMain: '这是将要用来替换主体默认内容的部分，此处可以是一个组件',
        replaceFooter: '这是将要用来替换底部默认内容的部分，此处可以是一个组件',
      }
    },
    methods: {}
  }
</script>

<style scoped>
  .homeSlot {
    background: bisque;
    width: 80%;
    height: auto;
    margin: 0 auto;
  }
</style>

//这是第一种用法的子组件
<template>
  <div>
    <h3>这是slot的第一种用法</h3>
    <slot>{{defaultContent}}</slot>
  </div>
</template>

<script>
  export default {
    name: "UseSolt",
    data() {
      return {
        defaultContent: '我是solt中的默认内容'
      }
    },
    methods: {}
  }
</script>

<style scoped>

</style>

//这是第二种用法的子组件
<template>
  <div class="container">
    <h3>这是slot的第二种用法</h3>
    <header>
      <slot name="header">{{defaultHeader}}</slot>
    </header>
    <main>
      <slot name="main">{{defaultMain}}</slot>
    </main>
    <h4>如果父组件中加了v-slot:default属性，则此处的未具名插槽只匹配父组件中template中有v-slot:default属性的内容</h4>
    <h4>如果父组件中未加v-slot:default属性，则这个slot可以用来匹配父组件中除具名插槽以外的内容</h4>
    <slot>这个slot可以用来匹配具名插槽以外的内容</slot>
    <footer>
      <slot name="footer">{{defaultFooter}}</slot>
    </footer>
  </div>
</template>

<script>
    export default {
        name: "UseSoltTwo",
        data() {
            return {
              defaultHeader: '这是头部默认的内容',
              defaultMain: '这是主体默认的内容',
              defaultFooter: '这是底部默认的内容',
            }
        },
        methods: {}
    }
</script>

<style scoped>

</style>

//这是第三种用法的子组件
<template>
  <div>
    <h3>这是slot的第三种用法,此用法可以让父组件访问子组件中的数据</h3>
      <span>
        <slot v-bind:user="user">
          {{ user.lastName }}
        </slot>
      </span>
  </div>
</template>

<script>
  export default {
    name: "UseSlotThree",
    data() {
      return {
        user: {
          firstName: '重',
          lastName: '庆',
          fullName: '重 庆'
        }
      }
    },
    methods: {}
  }
</script>

<style scoped>

</style>

有不对的地方还请指出！以免误导大家，谢谢！