写点什么

Vue 进阶(幺贰捌):Vue 插槽:slot、slot-scope 与指令 v-slot 应用讲解

发布于: 刚刚
Vue进阶(幺贰捌):Vue插槽:slot、slot-scope与指令v-slot应用讲解

一、前言

在前期博文《Vue进阶(幺贰柒):Vue插槽》中主要讲解了Vue插槽的基础用法,此篇博文接下来讲解高版本下通过v-slot指令如何应用Vue插槽及与slotslot-scope的用法区别。

二、不具名插槽

<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>
复制代码


三、具名插槽

<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在组件中使用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>
复制代码


五、slot-scope 与 v-slot

5.1 slot-scope

  1. 在组件模板中书写所需slot插槽,并将当前组件的数据通过v-bind绑定在slot标签上。

  2. 在组件使用时,通过slot-scope=“scope”,接收组件中slot标签上绑定的数据。

  3. 通过scope.xxx就可以使用绑定数据了


<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>
复制代码


<script>   new Vue({      el:"#app",      components:{         'Test':{            template:"#test",            data(){               return {                  msg:"你好"               }            },         }      }   })</script>
复制代码


5.2 v-slot

<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>
复制代码



Vue2.6.0中使用v-slot指令取代了特殊特性slotslot-scope,但是从上述案例可以看出,v-slot在使用时,需要在template标签内,这点大家在应用时要注意。

六、拓展阅读

发布于: 刚刚阅读数: 2
用户头像

No Silver Bullet 2021.07.09 加入

岂曰无衣 与子同袍

评论

发布
暂无评论
Vue进阶(幺贰捌):Vue插槽:slot、slot-scope与指令v-slot应用讲解