Vue插槽：slot、slot-scope与v-slot

最新推荐文章于 2024-06-03 11:29:18 发布

wsj8848

最新推荐文章于 2024-06-03 11:29:18 发布

阅读量867

点赞数

分类专栏： vue 文章标签： vue.js html5 html 前端

本文链接：https://blog.csdn.net/wsj8848/article/details/120327144

版权

vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Vue插槽：slot、slot-scope与v-slot

vue 2.6.0+ 版本后 v-slot 替代 slot 和 slot-scope

1.匿名插槽

父组件占位置，决定插入内容

<body>
<div id="app">
  <Test>
     <div>slot插槽占位内容</div>
  </Test>
</div>
<template id="test">
  <div>
     <slot></slot>//定义插槽
     <h3>这里是test组件</h3>
  </div>
</template>
</body>

<script>
  Vue.component('Test',{
   template:"#test"
  });

   new Vue({
      el:"#app",
   })
</script>

在这里插入图片描述

2.具名插槽

`slot`

父组件占位置，决定插入内容，父组件 slot=‘header’ 和子组件 name=‘header’ 相对应

<body>
   <div id="app">
      <Test>
         <div slot="header">这里是头部</div>//具名插槽使用
         <div slot="footer">这里是尾部</div>
      </Test>
   </div>
   <template id="test">
      <div>
         <slot name="header"></slot>//具名插槽
         <h3>这里是Test组件</h3>
         <slot name="footer"></slot>
      </div>

   </template>
</body>
<script>
   Vue.component(
      'Test',{
         template:"#test"
   });
   new Vue({
      el:"#app"
   })

</script>

在这里插入图片描述

`v-slot`

父组件占位置，决定插入内容，父组件 v-slot=‘header’ 和子组件 name=‘header’ 相对应，
在组件中使用slot进行占位时，也是在slot标签内使用name 属性给slot插槽定义一个名字。但是在html内使用时就有些不同了。需要使用template模板标签，template标签内，使用v-slot指令绑定插槽名，标签内写入需要添加的内容。

<body>
   <div id="app">
      <Test>
         <template v-slot:header>//v-slot指令使用插槽
            <h2>slot头部内容</h2>
         </template>
         
         <p>直接插入组件的内容</p>
         
         <template v-slot:footer>
            <h2>slot尾部内容</h2>
         </template>
      </Test>
   </div>
   
   <template id ='test'>
      <div class="container">
         <header>
            <!-- 我们希望把页头放这里 -->
            <slot name = "header"></slot>//具名插槽
         </header>
         <section>
            主体内容部分
         </section>
         <footer>
            <!-- 我们希望把页脚放这里 -->
            <slot name = 'footer'></slot>
         </footer>
      </div>
   </template>
   
</body>

<script>
   Vue.component('Test',{
      template:"#test"
   });
   new Vue({
      el:"#app"
   })
</script>

在这里插入图片描述

3.作用域插槽

`slot-scope` 使用

父组件占位置，子组件提供数据
父组件和子组件同时需要写两个属性：slot=“default” slot-scope=“scope” 和 name=“default” :msg=“msg” 相互对应

<body>
   <div id="app">
      <Test>
         <div slot="default" slot-scope="scope">//作用域插槽的用法（slot-scope）
            {{ scope.msg }}
         </div>
         
      </Test>
   </div>

   <template id="test">
      <div>
         <slot name="default" :msg="msg"> </slot>
         <p>这里是test组件</p>
      </div>
   </template>
</body>

在这里插入图片描述

`v-slot` 使用

父组件占位置，子组件提供数据
父组件将两个属性结合，子组件需要两个属性：v-slot:header=“scope” 和 name=“header”:msg=“msg” 相对应

<body>
   
   <div id="app">
      <Test>
         <template v-slot:header="scope">//v-slot定义作用域插槽
            <div>
                  <h3>slot</h3>
                  <p> {{scope.msg}} </p>
            </div>
         </template>
      </Test>
   </div>
   
   <template id="test">
      <div>
         <slot name="header":msg="msg"></slot>
         <p>这里是test组件</p>
      </div>
   </template>
   
</body>
<script>
   Vue.component('Test',{
      template:"#test",
      data(){
         return {
            msg:'这里是头部'
         }
      }
   });

   new Vue({

   }).$mount("#app")
</script>

在这里插入图片描述

return {
msg:‘这里是头部’
}
}
});

   new Vue({

   }).$mount("#app")
</script>

[外链图片转存中…(img-BysSZiMK-1631770764141)]

wsj8848

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Vue插槽：slot、slot-scope与v-slot

Vue插槽：slot、slot-scope与v-slotvue 2.6.0+ 版本后 v-slot 替代 slot 和 slot-scope1.匿名插槽父组件占位置，决定插入内容<body><div id="app"> <Test> <div>slot插槽占位内容</div> </Test></div><template id="test"> <div>
复制链接

扫一扫