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

标签：can   style   elements   message   efi   when   and   mount   HERE   

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>

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

标签：can   style   elements   message   efi   when   and   mount   HERE   

原文地址：https://www.cnblogs.com/Answer1215/p/9350937.html