深入理解Vue中的插槽、内容分发、具名插槽

本篇文章给大家分享Vue进阶技巧，深入理解下Vue中的插槽、内容分发、具名插槽，希望对大家有所帮助。

(资料图片仅供参考)

插槽 Slots简介

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

// 父元素传入插槽内容FancyButton("Click me!")// FancyButton 在自己的模板中渲染插槽内容function FancyButton(slotContent) {    return ``}
登录后复制

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

slot-scope浅析

//普通的组件定义        {{ book.name }}    
//slot-scope组件定义                                    {{ book.name }}            
//父组件使用    
登录后复制

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

常用API浅析

具名插槽

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

                
登录后复制

作用域插槽

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

数据传递

//子组件
登录后复制

数据接收默认插槽接收

//父组件 - 使用方  {{ shopInfo }} {{ 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" }//     ]// }            {{ title }}
                                
    
Vue.component("my-list", {    template: "#my-list",    props: [ "title", "items" ]});
登录后复制

递归组件

满足条件需要给组件设置一个name属性需要有一个明确的结束条件

<script>export default {    name:"my-component",    props: {        count: {            type: Number,            default: 1        }    }}</script>
登录后复制

动态组件

//component 就是js import进的组件实例，其值可以是标签名、组件名、直接绑定一个对象等
登录后复制

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

拓展

components的第二种写法

    
<script>var app = new Vue({    el: "#app",    data: {        isShow: true    },    components: {        cpn: {            template: "#com",            data() {                isShow: false            }        }    }})</script>
登录后复制

Web Component 简介

常见的填充Web组件的shadow DOM的模板有template和slot

模板 - Templates

需要在网页上重复的使用相同的标记结构时，为了避免CV的操作可以通过模板的方式进行实现需要注意的是模板 - Template 和其内部的内容是不会在DOM中呈现的，可以通过js进行访问并添加到DOM中，从而在界面上进行展示


登录后复制

let template = document.getElementById("my-paragraph");let templateContent = template.content;document.body.appendChild(templateContent);
登录后复制

可以配合Web Component一起使用，实现纯js自定义的组件

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));  }})// 自定义标签使用
登录后复制

后续的样式逻辑也需要加在template中，方便通过后续的相关逻辑(如template.content获取到然后打入到指定的容器中)

Web Component简介

Web Component的一个很重要的属性就是封装 - 可以将标记结构、样式和行为影藏起来，并于界面上的其他代码隔离开来，保证代码的独立性

Web Component标准非常重要的一个特性是，使得开发者可以将HTML页面的功能封住成custom elements(自定义标签)

customElements 接口用来实现一个对象，允许开发者注册一个custom elements的信息，返回已注册的自定义标签的信息；

customElements.define方法用来注册一个custom element，接收三个参数

参数一：表明创建元素的名称，其注册的名称不能简单的单词，需要由短划线进行拼接

参数二：用于定义元素行为的类

参数三：一个包含extends属性配置的配置对象，可选，指定了所创建的自定义元素是继承于哪个内置的元素，可以继承任何内置的元素；

customElements.define(    "word-count",     WordCount,     { extends: "p" });
登录后复制

可以使用ES2015的类实现

class WordCount extends HTMLParagraphElement {  constructor() {    // 必须首先调用 super 方法    super();    // 元素的功能代码写在这里    ...  }}
登录后复制

自定义标签的类型

类型一：Autonomous custom elements是独立的元素，它不继承其他内建的 HTML 元素，可以直接通过标签的方式进行HTML使用，也可以通过js的方式进行使用document.createElement("popup-info")类型二：Customized built-in elements继承自基本的 HTML 元素。在创建时，你必须指定所需扩展的元素，使用时，需要先写出基本的元素标签，并通过 is属性指定 custom element 的名称；

或document.createElement("p", { is: "word-count" })

参考文献 - MDN

shadow DOM简介

图解Shandow DOM

Shadow host：一个常规 DOM 节点，Shadow DOM 会被附加到这个节点上。

Shadow tree：Shadow DOM 内部的 DOM 树。

Shadow boundary：Shadow DOM 结束的地方，也是常规 DOM 开始的地方。

Shadow root: Shadow tree 的根节点。

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

基本用法

Element.attachShadow()方法可以将一个shadow DOM添加到任何一个元素上，接收一个配置对象参数，该对象有一个mode的属性，值可以是open - 可以通过外部js获取 Shadow DOM和closed - 外部不可以通过js进行获取 Shadow DOM

let shadow1 = elementRef.attachShadow({mode: "open"});let shadow2 = elementRef.attachShadow({mode: "closed"});let myShadowDom = shadow1.shadowRoot; // 具体内容let myShadowDom = shadow2.shadowRoot; //null
登录后复制

当需要将一个shadow DOM添加到自定义的标签上时，可以在自定义的构造函数中添加如下逻辑；

let shadow = this.attachShadow({mode: "open"});// 将一个shadow DOM添加到一个元素上之后就可以使用DOM API进行操作访问了
登录后复制

（学习视频分享：web前端开发、编程基础视频）

以上就是深入理解Vue中的插槽、内容分发、具名插槽的详细内容，更多请关注php中文网其它相关文章！

关键词：方式进行可以使用