slot 插槽

最新推荐文章于 2024-07-19 15:13:01 发布

weixin_44889992

最新推荐文章于 2024-07-19 15:13:01 发布

阅读量90

点赞数

分类专栏： vue 文章标签： slot

本文链接：https://blog.csdn.net/weixin_44889992/article/details/89515116

版权

vue 专栏收录该内容

40 篇文章 0 订阅

订阅专栏

<body>
   <div id="app">
            <Hello>
                  <div> 这是组件内直接写的 </div>
           </Hello>
    </div>
    <template id="hello">
        <div>
             <h3> 骏哥, 被伤了 </h3>
             <slot></slot>
       </div>
   </template>
</body>
<script>
/*
slot
可以代替组件内直接写的内容
*/
Vue.component('Hello',{
         template: '#hello'
         })
new Vue({
       el: '#app'
})
</script>

具名插槽

<body>
      <div id="app">
           <Hello>
            <header slot = 'header'>头部</header>
            <section slot = "content"> 内容 </section>
            <footer slot = "footer"> 底部 </footer>
        </Hello>
     </div>
   <template id="hello">
      <div>
          <slot name = 'header'></slot>
            <h3> 骏哥, 被伤了 </h3>
            <slot name = "content"></slot>
            <slot name = "footer"></slot>
     </div>
 </template>
</body>
<script>
/*
slot
可以代替组件内直接写的内容
*/
Vue.component('Hello',{
      template: '#hello'
})
new Vue({
       el: '#app'
})
</script>