Vue 插槽了解一波(匿名插槽、具名插槽、作用域插槽)使用最新 v-slot指令,简单易懂

为什么要使用插槽?

随着技术的不断创新,为了开发的便利,越来越多的插件应运而生,这个时候就会出现一个弊端,随着使用者的不同,对插件的定义就会有所偏差,那对于开发者来言,需要满足所有的使用者才能体现插件的便利性,那对于插件中内容的定义及要求,交给使用者,这是唯一的办法,插槽的使用就能解决了,话不多说,开发中的过程多多少少会遇到,直接上一波经验总结。



  
    
    
    
    Document
    
  
  
    

匿名插槽的使用如下,就是这么简单(支持多个渲染):

Vue 插槽了解一波(匿名插槽、具名插槽、作用域插槽)使用最新 v-slot指令,简单易懂_第1张图片Vue 插槽了解一波(匿名插槽、具名插槽、作用域插槽)使用最新 v-slot指令,简单易懂_第2张图片

具名插槽使用,看仔细变化的地方:

slot 标签不指定name属性:

Vue 插槽了解一波(匿名插槽、具名插槽、作用域插槽)使用最新 v-slot指令,简单易懂_第3张图片Vue 插槽了解一波(匿名插槽、具名插槽、作用域插槽)使用最新 v-slot指令,简单易懂_第4张图片

slot标签指定了name属性:

Vue 插槽了解一波(匿名插槽、具名插槽、作用域插槽)使用最新 v-slot指令,简单易懂_第5张图片Vue 插槽了解一波(匿名插槽、具名插槽、作用域插槽)使用最新 v-slot指令,简单易懂_第6张图片

特别情况,默认的slot标签的name属性是default,此时可以使用v-slot:default的效果是一样的。

作用域插槽,需要理解如何传值。

Vue 插槽了解一波(匿名插槽、具名插槽、作用域插槽)使用最新 v-slot指令,简单易懂_第7张图片Vue 插槽了解一波(匿名插槽、具名插槽、作用域插槽)使用最新 v-slot指令,简单易懂_第8张图片

你可能感兴趣的:(es6,前端,vue.js)