插槽(Vue2)

Vue官网
仅仅是个人学习的记录

组件:

<template>
  <div class="container">
    <header>
      <slot name="header">这是Header</slot>
    </header>
    <main>
      <slot>这是Main</slot>
    </main>
    <footer>
      <slot name="footer">这是Footer</slot>
    </footer>
    <van-button @click="sayHi">
      <slot name="submit">Submit</slot>
    </van-button>
  </div>
</template>

<script>
export default {
  name: "ChildModule",
  methods: {
    sayHi() {
      this.$toast({message: 'Hi'})
    },
  },
}
</script>

<style scoped lang="less">

</style>

调用组件:

<child-module>
      <template #header>
        我是顶部
      </template>
      <template #default>
        我是主体
      </template>
      <template #footer>
        我是尾部
      </template>
      <template #submit>
        say hi
      </template>
    </child-module>

image.png