Vue中slot-scope的深入理解(适合初学者)

百度上已经有很多的关于slot-scope的文章,但我感觉都是那些以前没学好,又回头学的人,他们都使用了.Vue文件,我觉得有点不适合初学者,所以我就写一篇适合初学者的。

先抛例程:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件之通过插槽(slot)分发内容</title>
    <script src="你的vue地址,请下载最新版的"></script>
    <script>
        Vue.component("test-slot",{
           // 插槽允许有默认内容
           template:
               `<div>
                    <strong>Error!</strong>
                    <slot></slot>
                </div>
               `,
            data:function () {
                return {
                    name:"perry"
                }
            }
        });
    //    具名插槽
        Vue.component("slot-name",{
           template:
               `<div>
                      <header>
                            <slot name="header"></slot>
                      </header>
                     <main>
                        <slot ></slot>
                     </main>
                     <footer>
                        <slot name="footer"></slot>
                     </footer>

                </div>
               `
        });

    //    作用域插槽
        Vue.component("todo-list",{
            inheritAttrs:false,
            props:{
                todos:[Array,Object]
            },
            template:
            `<ul>
                <li v-for="todo in todos" :key="todo.id" style="display: block;" >
                    <slot :data="todo">{{todo.text}}</slot>
                </li>
             </ul>
            `
        });

    </script>

    <style>
        li{
            list-style: none;
            display: inline-block;
            font-size: 25px;
        }
    </style>
</head>
<body>
    <div id="app">
        <!--1、插槽内容  slot可以接收任何内容、代码,包括组件-->
        <test-slot>Something bad happened.你是谁啊,我认识你吗</test-slot>
        <test-slot>
            Something bad happened.
            <!--允许使用变量,但该变量必须是本作用域的才会生效,这里name的值将会是"岔道口"-->
            <h3>标题{{name}}</h3>
            <img src="img/flower.jfif" alt="图片无法显示">

        </test-slot>
        <!--2、具名插槽 slo有一个特殊的属性name,可以使插槽具名-->
        <slot-name>
            <h3>劝学</h3>
            <p>少壮不努力,老大徒伤悲</p>
            <p>光阴似箭,日月如梭</p>
            <template slot="header">
                <ul >
                    <li>主页</li>
                    <li>关于时间</li>
                    <li>关于人生</li>
                    <li>关于未来</li>
                </ul>
            </template>
            <p>你好啊</p>
            <p slot="footer">
                <p>结尾</p>
                <p>粤ICP备6545646456415</p>
            </p>
        </slot-name>

        <!--使用作用域插槽,通过slot-scope实现-->
        <todo-list :todos="todos">
            <template slot-scope="slotProps">
                <span v-if="slotProps.data.isTrue">√</span>
                {{slotProps.data.text}}
            </template>
        </todo-list>

        <!--使用ES2015结构语法-->
        <todo-list :todos="todos">
            <template slot-scope="{data}">
                <span v-if="data.isTrue">√</span>
                {{data.text}}
            </template>
        </todo-list>
    </div>

    <script>
        new Vue({
            el:"#app",
            data:{
                name:"岔道口",
                todos:[
                    {text:"A",id:1,isTrue:true},
                    {text:"B",id:2,isTrue:true},
                    {text:"C",id:3,isTrue:false},
                    {text:"D",id:4,isTrue:true},
                ],
                // slotProps:""
            }
        })

    </script>
</body>
</html>

例程中也写了普通插槽和具名插槽,这个我就不说,我就说一下作用域插槽。首先从“作用域插槽“”这个名字说起,本来你父组件的模板是无法使用到子组件模板中的数据,官网中有一句特别强调的话:父组件模板的所有东西都会在父级作用域内编译;子组件模板的所有东西都会在子级作用域内编译。这句话其实挺难理解,举个例子就知道了,

<test-slot>

          Something bad happened.

         <!--允许使用变量,但该变量必须是本作用域的才会生效,这里name的值将会是"岔道口"-->

           <h3>标题{{name}}</h3>

           <img src="img/flower.jfif" alt="图片无法显示">

</test-slot>

这是我上面的例子,也就是说这里name必须是当前组件里的,不能是test-slot这个组件内部的数据,这是它作用域限制,name这个数据属于父组件的作用域,所以只能是父组件的数据。但是slot-scope的出现却实现了父组件调用子组件内部的数据,子组件的数据通过slot-scope属性传递到了父组件

//    作用域插槽
    Vue.component("todo-list",{
        inheritAttrs:false,
        props:{
            todos:[Array,Object]
        },
        template:
        `<ul>
            <li v-for="todo in todos" :key="todo.id" style="display: block;" >
                  //这里的:data=“todo”就是讲子组件todo这个数据传给了父组件
                <slot :data="todo">{{todo.text}}</slot>//todo.text是默认值,父组件会把它覆盖掉
            </li>
         </ul>
        `
    });
<!--使用作用域插槽,通过slot-scope实现-->
<todo-list :todos="todos">
    <template slot-scope="slotProps">
        <span v-if="slotProps.data.isTrue">√</span>
        {{slotProps.data.text}}
    </template>
</todo-list>

使用的时候就是这样,从子组件传过来的名为data值为todo的数据将会被slot-scope接收,需要注意的是,slot-scope接收的是一个对象,这里命名为slotProps,也就是说你传过来的data将会作为slotProps的一个属性,所以需要slotProps.data才能调用到data。前面说了,data的值为todo,todo是什么呢?todo是todos遍历出来的,所以是一个对象。

new Vue({
    el:"#app",
    data:{
        name:"岔道口",
        todos:[
            {text:"A",id:1,isTrue:true},
            {text:"B",id:2,isTrue:true},
            {text:"C",id:3,isTrue:false},
            {text:"D",id:4,isTrue:true},
        ],
        // slotProps:""
    }
});

我们已经理解了slot-scope特性,那么他有什么运用场景呢?我们可以试想一下,别人写好了一个组件,该组件已经封装好了,但他觉得,数据的显示风格让用户自己定义,就像我们上面,我们希望列表的样式由用户定义,比如我就加了一个√号。一开始最初的数据是我们传进去的,但数据必须进过子组件处理后,写组件那个人肯定希望显示的是处理后的数据。这时候slot-scope就无比重要了。

总结

到此这篇关于Vue中slot-scope深入理解的文章就介绍到这了,更多相关Vue slot-scope理解内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

时间: 2021-04-15

vue template中slot-scope/scope的使用方法

在vue 2.5.0+ 中slot-scope替代了 scope template 的使用情形为,我们已经封装好一个组建,预留了插槽,使用 的插槽 首先 我们的创建一个组建 组建很简单有一个 slot,slot有两个属性 a=123,b=msg <template> <div> <div>下面是一个slot</div> <slot a="123" b="msg" ></slot> </di

Vue插槽_特殊特性slot,slot-scope与指令v-slot说明

1.slot作用/概念:预先将将来要使用的内容进行保留: 2.具名插槽:给slot起个名字 3.slot.slot-scope已经被废弃推荐使用vue2.6.0中的v-slot:但是这边还是对新旧方法对做一下使用说明. slot插槽(不具名) <body> <div id="app"> <Test> <div>slot插槽占位内容</div> </Test> </div> <template id

深入理解vue中slot与slot-scope的具体使用

写在前面 vue中关于插槽的文档说明很短,语言又写的很凝练,再加上其和methods,data,computed等常用选项使用频率.使用先后上的差别,这就有可能造成初次接触插槽的开发者容易产生"算了吧,回头再学,反正已经可以写基础组件了",于是就关闭了vue说明文档. 实际上,插槽的概念很简单,下面通过分三部分来讲.这个部分也是按照vue说明文档的顺序来写的. 进入三部分之前,先让还没接触过插槽的同学对什么是插槽有一个简单的概念:插槽,也就是slot,是组件的一块HTML模板,这块模板

深入理解vue中的slot与slot-scope

写在前面 vue中关于插槽的文档说明很短,语言又写的很凝练,再加上其和methods,data,computed等常用选项使用频率.使用先后上的差别,这就有可能造成初次接触插槽的开发者容易产生"算了吧,回头再学,反正已经可以写基础组件了",于是就关闭了vue说明文档. 实际上,插槽的概念很简单,下面通过分三部分来讲.这个部分也是按照vue说明文档的顺序来写的. 进入三部分之前,先让还没接触过插槽的同学对什么是插槽有一个简单的概念:插槽,也就是slot,是组件的一块HTML模板,这块模板

Vue作用域插槽slot-scope实例代码

vue中的插槽有三种:单个插槽.具名插槽.作用域插槽,这个在官网上能看到 (https://cn.vuejs.org/v2/guide/components.html#单个插槽) 作用域插槽简单来说就是父组件只管显示样式,数据由子组件来提供.比如上面的代码,el-table-column内的template是传递给其内部solt的显示内容,但是scope的值是由el-table-column内部solt绑定的数据返回的.这个数据具体是什么由el-table-column中指定,类似: <slot

Vue.js特性Scoped Slots的浅析

什么是scoped slots A scoped slot is a special type of slot that functions as a reusable template (that can be passed data to) instead of already-rendered-elements. 上面是官方的定义. 作用域插槽(Scoped Slots)是vue.js中一个非常有用的特性,它可以使组件更加通用和复用.唯一的问题是理解起来比较困难.试图去让你理解父与子作用域

深入浅析Vue中的slots/scoped slots

一直对Vue中的slot插槽比较感兴趣,下面是自己的一些简单理解,希望可以帮助大家更好的理解slot插槽 下面结合一个例子,简单说明slots的工作原理 dx-li子组件的template如下: <li class="dx-li"> <slot> 你好! </slot> </li> dx-ul父组件的template如下: <ul> <dx-li> hello juejin! </dx-li> <

浅析Vue 中的 render 函数

render函数是什么 简单的说,在vue中我们使用模板HTML语法组建页面的,使用render函数我们可以用js语言来构建DOM 因为vue是虚拟DOM,所以在拿到template模板时也要转译成VNode的函数,而用render函数构建DOM,vue就免去了转译的过程. 当使用render函数描述虚拟DOM时,vue提供一个函数,这个函数是就构建虚拟DOM所需要的工具.官网上给他起了个名字叫createElement.还有约定的简写叫h, vm中有一个方法_c,也是这个函数的别名 先看官网对

浅析vue中常见循环遍历指令的使用 v-for

vue中循环遍历使用的指令是v-for 1.v-for遍历数组 (1)value in arr 遍历数组中的元素 (2)(value,index) in arr 遍历数组中的元素和数组下标 运行代码: <body> <div class="box"> <ul> <li v-for="value in arr">{{value}}</li><br> <li v-for="(valu

浅析Vue中method与computed的区别

在new Vue的配置参数中的computed和methods都可以处理大量的逻辑代码,但是什么时候用哪个属性,要好好区分一下才能做到正确的运用vue. computed称为计算属性,顾名思义,计算就要返回一个计算的结果,所以,当我们要处理大量的逻辑,但是最后要取得最后的结果的时候可以用computed: 为了说明method与computed的区别,在此我想先来看看computed属性在vue官网中的说法:模板内的表达式是非常便利的,但是它们实际上只用于简单的运算.在模板中放入太多的逻辑会让模

深入浅析Vue中的 computed 和 watch

computed 计算属性:通过属性计算得来的属性 计算属性,是在相关联的属性发生变化才计算,计算过一次,如果相关属性没有变化,下一次就不需要计算了,直接去缓存的值 a:<input type="number" v-model.number="a" /> b:<input type="number" v-model.number="b" /> <!--c:<input type="

深入浅析Vue 中 ref 的使用

官网上的说明 一.前言# 在之前的前端开发中,为了实现我们的需求,通常采用的方案是通过 JS/Jquery 直接操纵页面的 DOM 元素,得益于 Jquery 对于 DOM 元素优异的操作能力,我们可以很轻易的对获取到的 DOM 元素进行操作.但是,当我们开始在前端项目中使用 Vue 这类的 MVVM 框架之后,对于 DOM 的操作我们就应当完全的交给框架,而我们只需要关注于数据.难道,在 Vue 中就不能手动获取到页面上的 DOM 元素了吗,答案当然是可以手动获取到 DOM 元素的,在 Vue

深入浅析Vue中mixin和extend的区别和使用场景

Vue中有两个较为高级的静态方法mixin和extend,接下来我们来讨论下关于他们各自的原理和使用场景. Mixin: 原理: 先来看看官网的介绍: 参数:{Object} mixin 用法: 混入也可以进行全局注册.使用时格外小心!一旦使用全局混入,它将影响每一个之后创建的 Vue 实例.使用恰当时,这可以用来为自定义选项注入处理逻辑. // 为自定义的选项 'myOption' 注入一个处理器. Vue.mixin({ created: function () { var myOption

浅析Vue中拆分视图层代码的5点建议

一.框架的定位 框架通常只是一种设计模式的实现,它并不意味着你可以在开发中避免所有分层设计工作. SPA 框架几乎都是基于 MVC 或 MVVM 设计模式而建立起来的,这些模式都只是宏观的分层设计,当代码量开始随着项目增大而增多时,问题就会越来越多.许多企业内部的项目仍然在使用 angularjs1.X ,你会发现许多 controller 的体积大到令人发指,稍有经验的团队会利用好 angularjs1 构建的 controller , service , filter 以及路由和消息机制来完

深入浅析vue中cross-env的使用

cross-env cross-env是跨平台设置和使用环境变量的脚本. 在大多数Windows命令行中在使用NODE_ENV = production设置环境变量时会报错.同样,Windows和Linux命令如何设置环境变量也有所不同. 使用 cross-env 可以设置在不同的平台上有相同的NODE_ENV参数. 使用 安装 npm install cross-env --save-dev package.json "scripts": { "serve": &

浅析vue中的provide / inject 有什么用处

1.前言 vue的父子组件通信用什么? :prop和$emit的组合. 如果是爷孙组件呢? :那么就要用父组件来转发数据和事件了. 如果是太爷爷和孙子组件呢? :当然是vuex啦 emmm 好的,没我啥事了,我这就走. 不行,我还能再挣扎一会儿!肯定有一部分兄弟做的项目比较小,组件通信的情况不是很多,懒得引入vuex,那么provide/inject就是爷孙(不限于爷孙/父子,中间隔了多少级都可以)通信问题的最好解决方案啦! 2.官方文档抄过来的介绍 这对选项需要一起使用,以允许一个祖先组件向其