美文网首页
vue3中的插槽

vue3中的插槽

作者: 焚心123 | 来源:发表于2022-10-19 14:22 被阅读0次
    插槽
    • 默认插槽
    • 具名插槽,v-slot可以简写为#
    当前组件中
    <div class="container">
      <header>
        <slot name="header"></slot>
      </header>
      <main>
        <slot></slot>
      </main>
      <footer>
        <slot name="footer"></slot>
      </footer>
    </div>
    在父组件中使用
    <BaseLayout>
      <template v-slot:header>
        <!-- header 插槽的内容放这里 -->
      </template>
    </BaseLayout>
    
    • 动态插槽 #[dynamicSlotName]
    • 作用域插槽(父组件通过props传递,子组件通过插槽向父组件传递)
    子组件
     <ul>
        <li style="color: red"><slot name="header" message="1"></slot></li>
        <li><slot message="2"></slot></li>
        <li style="color: green"><slot name="footer" message="3"></slot></li>
      </ul>
    父组件中
     <HelloWord>
         <template #header="m">{{ m.message }}</template>
         <template #default>1111</template>
         <template #footer="f">{{ f.message }}</template>
      </HelloWord>
    
    

    相关文章

      网友评论

          本文标题:vue3中的插槽

          本文链接:https://www.haomeiwen.com/subject/qivezrtx.html