提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

[Vue @Component] Place Content in Components with Vue Slots

Vue in with Component content Components Place Slots
2023-09-14 09:00:50 时间

Vue's slots enable you to define where content of a component should land when you define the content inside of a parent component. You can also name slots to arrange the elements however you'd like and allow your component to build it's own content around the content that will be placed.

 

main.js:

import Vue from 'vue'
import App from './App.vue'


new Vue({
  render: (h) => (
    <App>
    <h1 slot="header">This is header</h1>  
    <h2 slot="footer">This is footer</h2>  
  </App>
  )
}).$mount('#app')

 

App.vue:

<template>
  <section class="section">
      <slot name='header'></slot>

     <hello-world message="Message from APP"></hello-world>
  
     <slot name='footer'></slot>
  </section>
</template>

 

相关文章