Vue中的插槽、内容分发、具名插槽应用实例分析

今天小编给大家分享一下Vue中的插槽、内容分发、具名插槽应用实例分析的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。

创新互联长期为近1000家客户提供的网站建设服务，团队从业经验10年，关注不同地域、不同群体，并针对不同对象提供差异化的产品和服务；打造开放共赢平台，与合作伙伴共同营造健康的互联网生态环境。为博野企业提供专业的网站建设、成都网站建设，博野网站改版等技术服务。拥有十多年丰富建站经验和众多成功案例,为您定制开发。

插槽 Slots简介

Vue中组件的数据可以通过props进行传递，或者通过事件的方式进行获取传递，但当需要接收模板内容(任意合法的模板内容，代码片段、Vue组件)时，就需要使用插槽来实现了。当然也可以通过函数式编程间接实现。

可以将插槽理解为js中的函数进行编译

// 父元素传入插槽内容
FancyButton('Click me!')

// FancyButton 在自己的模板中渲染插槽内容
function FancyButton(slotContent) {
    return `
      ${slotContent}
    `
}

最好的封装方式是将共性抽取到组件中，将不同点暴露为插槽 - 抽取共性，保留不同
父组件模板的所有东西都会在父组件作用域中编译，子组件模板的所有东西都会在子组件作用域内编译 - 编译作用域

slot-scope浅析

常规的slot可以用于自定义组件的模板，但只是限制于固定的模板，无法自定义内部的具体的某一项，即常规的slot无法实现对组件循环体的每一项进行不同的内容分发，此时可以通过slot-scope进行实现，本质上和slot一样，不同点在于可以进行参数传递

//普通的组件定义

    
    {{ book.name }}
    



//slot-scope组件定义

    
        
            
            {{ book.name }}
        
    


//父组件使用

    
        限时优惠
        {{ slotProps.book.name }}

使用slot-scope时，当父组件使用该API，对应的插槽会替换模板中的slot进行展示

常用API浅析

具名插槽

在组件中定义多个插槽出口可以兼容多个不同需求的兼容性，使得多个插槽内容传入到各自的插槽出口中；当插槽中配置了name属性时，此插槽就被称为具名插槽(named slots)，没有提供name的插槽会隐式命名为「default」

Vue中的插槽、内容分发、具名插槽应用实例分析

v-slot 可以简写为#，其值对应于插槽中的name对应的值;
当在一个组件中同时存在默认插槽和具名插槽时，所有位于顶级的非template节点都被隐式的视为默认插槽的内容，因此可以省略默认插槽的template节点标签；


    
    
    
        A paragraph for the main content.

        And another one.

    
    
        Here's some contact info

作用域插槽

普通的插槽，是无法获取其他作用域下的数据的，即父组件模板中的表达式只能访问父组件的作用域；子组件模板中的表达式只能访问子组件的作用域
但在某些情况下，插槽中的内容想要同时使用父组件和子组件内的数据，可以通过像组件传递数据props那样，让子组件在渲染时将一部分数据提供给插槽，这样在组件外部(父组件)中就可以使用子组件中的数据了-通过slot的方式

子组件传入插槽的 props 作为了 v-slot 指令的值，可以在插槽内的表达式中访问，其中name是Vue特意保留的attribute，不会作为props进行传递

数据传递

//子组件

数据接收

//父组件 - 使用方

 {{ shopInfo }} {{ userInfo }}


  
    {{ shopInfo }}
  

  
    {{ introduction }}
  

  
    {{ userInfo }}

具名插槽接收
默认插槽接收

使用slot-scope时，用最后一个slot-scope替换模板中的slot


    
    555

    
    
        {{scope.name}}


    
    
        {{scope}}

        {{scope.name}}

        {{scope.age}}

使用作用域插槽时，可以实现既可以复用子组件slot，又可以使得slot的内容不一致，它允许使用者传递一个模板而不是已经渲染好的元素给插槽，所谓作用域是指模板虽然在父级作用域中渲染的，但是却可以拿到子组件的数据
常规的v-bind需要携带参数key值进行传递，例如v-bind:info = '123'；但是有时候会省略这个key值，直接进行传递数据，如v-bind = 'item'，这种用法会将整个对象的所有属性都绑定到当前元素上，适用于需要绑定的属性过多的场景

// data: {
//     shapes: [
//         { name: 'Square', sides: 4 },
//         { name: 'Hexagon', sides: 6 },
//         { name: 'Triangle', sides: 3 }
//     ],
//     colors: [
//         { name: 'Yellow', hex: '#F4D03F', },
//         { name: 'Green', hex: '#229954' },
//         { name: 'Purple', hex: '#9B59B6' }
//     ]
// }

    
        {{ shape.name }} ({{ shape.sides }} sides)

    


    
        
            

            {{ color.name }}

递归组件

动态组件

为了使得组件具有缓存作用，可以使用的内置组件，这样只要不离开当前页面，切换到其他组件后deforeDestory不会执行，因此组件具有了缓存功能

拓展

components的第二种写法

Lbxin class - 11

Web Component 简介

customElements.define('my-paragraph', class extends HTMLElement { constructor() { super(); let template = document.getElementById('my-paragraph'); let templateContent = template.content; const shadowRoot = this.attachShadow({mode: 'open'}) .appendChild(templateContent.cloneNode(true)); } }) // 自定义标签使用

如常见的video标签，其内部的一些控制器和按钮等都是通过Shandow DOM进行维护的，开发者可以通过这个API进行自己独立的逻辑控制

let shadow1 = elementRef.attachShadow({mode: 'open'}); let shadow2 = elementRef.attachShadow({mode: 'closed'}); let myShadowDom = shadow1.shadowRoot; // 具体内容 let myShadowDom = shadow2.shadowRoot; //null

以上就是“Vue中的插槽、内容分发、具名插槽应用实例分析”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注创新互联行业资讯频道。

重庆分公司，新征程启航

Vue中的插槽、内容分发、具名插槽应用实例分析

插槽 Slots简介

slot-scope浅析

常用API浅析

具名插槽

作用域插槽

递归组件

动态组件

拓展

components的第二种写法

Lbxin

Web Component 简介

其他资讯