细说Vue作用域插槽,匹配应用场景。

最近在官方文档中看到,vue新增了一种插槽机制,叫做作用域插槽。要求的版本是2.1.0+。

首先来说一下:顾名思义,所谓作用域插槽,主要就在作用域,需要注意的是(以下几点看不懂不要紧,配合下面的例子,你会一看就懂):

1. 组件中的slot标签只能有有一个,而这一个slot用于替代组件调用时的多个标签。即一个slot代替一组范围的标签,即为作用域。

2. 作用域插槽的特殊在于:可在上层作用域中通过临时变量拿到组件定义时通过作用域插槽传递的数据。

3. 作用域插槽的技巧在于:可在上层作用域中通过拿到的数据选择性地渲染标签(即修改slot对应的标签范围)。

下面通过实际例子来一步一步地细说:

**拥有作用域插槽的组件定义(实际代码中组件要在根实例创建之前定义):

        Vue.component("list-tpl", {
           props: ["list"],
           template: `
                <ul>
                    <li style="display:block;" v-for="(item, index) in list">
                        <slot :item="item"></slot>   // item为向上层传递的数据,单个slot在调用时转化为作用域内的多个标签
                    </li>
                </ul>
           `
       })

*根实例代码,主要包括测试数据:

var app = new Vue({
           el: "#app",
           data: {
               list: [
                   {
                       name: "tate",
                       age: 26,
                       single: true,  // 是否单身
                       stu: false     // 是否是学生
                   },
                   {
                       name: "kevin",
                       age: 23,
                       single: true,
                       stu: true
                   },
                   {
                       name: "harden",
                       age: 28,
                       single: false,
                       stu: false
                   },
                   {
                       name: "Jimmy",
                       age: 29,
                       single: false,
                       stu: true
                   }
               ]
           }
       })

*最重要的 组件调用

        <list-tpl :list="list">
            <!-- 调用的时候 a 为临时变量,只用于获取数据 -->
                <template slot-scope="a">
                    <!-- 若不加任何判断,整个template中的标签都会替换为定义时的slot -->
                    <h4>{{a.item.name}}</h4>
                    <h5>{{a.item.age}}</h5>
                    <!-- 技巧就在于通过a拿到的数据选择性地渲染标签,即修改单个slot对应的作用域范围 -->
                    <span v-if="a.item.single">我是单身</span>
                    <span v-if="a.item.stu">我是学生</span>
                    <span v-if="!a.item.single">我不是单身</span>
                    <span v-if="!a.item.stu">我不是学生</span>
                </template>
        </list-tpl>

*下面看一下本例子的实际效果:

*本例的全部代码如下,可自行运行查看效果:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <slot-test>
            <template slot="top">定制top</template>
        </slot-test>
        <list-tpl :list="list">
            <!-- 调用的时候 a 为临时变量,只用于获取变量 -->
                <template slot-scope="a">
                    <!-- 若不加任何判断,整个template中的标签都会替换为定义时的slot -->
                    <h4>{{a.item.name}}</h4>
                    <h5>{{a.item.age}}</h5>
                    <!-- 技巧就在于通过a拿到的数据选择性地渲染标签,即修改单个slot对应的作用域范围 -->
                    <span v-if="a.item.single">我是单身</span>
                    <span v-if="a.item.stu">我是学生</span>
                    <span v-if="!a.item.single">我不是单身</span>
                    <span v-if="!a.item.stu">我不是学生</span>
                </template>
        </list-tpl>
    </div>
   <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
   <script>
       Vue.component("slot-test", {
           template: "<div>                <slot name=‘top‘>                    <p>默认top</p>                </slot>                <slot name=‘mid‘>                    <p>默认mid</p>                </slot>                <slot name=‘bottom‘>                    <p>默认bototm</p>                </slot>            </div>"

       })
       Vue.component("list-tpl", {
           props: ["list"],
           template: `
                <ul>
                    <li style="display:block;" v-for="(item, index) in list">
                        <slot :item="item"></slot>   // item为向上层传递的数据,单个slot在调用时转化为作用域内的多个标签
                    </li>
                </ul>
           `
       })
       var app = new Vue({
           el: "#app",
           data: {
               list: [
                   {
                       name: "tate",
                       age: 26,
                       single: true,
                       stu: false
                   },
                   {
                       name: "kevin",
                       age: 23,
                       single: true,
                       stu: true
                   },
                   {
                       name: "harden",
                       age: 28,
                       single: false,
                       stu: false
                   },
                   {
                       name: "Jimmy",
                       age: 29,
                       single: false,
                       stu: true
                   }
               ]
           }
       })
   </script>
</body>
</html>

原文地址:https://www.cnblogs.com/pomelott/p/9537147.html

时间: 2024-11-05 22:47:09

细说Vue作用域插槽,匹配应用场景。的相关文章

[干货]关于vue作用域插槽的新的深入理解

父级组件 <template> <div class="wrapper"> <son1 title="标题3" :content="listData3" @father="teClick"> <template v-slot="scope"> <b class="qianz">{{scope.item.prefix ? '有前缀

Vue作用域插槽:用作循环结构的模版

一 项目结构 二 App组件 <template> <div id="app"> <!-- 子组件 --> <todos :list="list" v-slot:default="{item}"> <!-- 插槽内容 --> <span v-if="item.isComplete">?</span> {{item.text}} </tod

新版vue作用域插槽的使用

2.6开始,作用域插槽的使用有了不同的地方: 作用域插槽的个人理解就是让子组件的数据可以在父组件中使用:  也是一个数据传递的方式了: 不多说,上代码 子组件定义一个插槽,并且定义一个需要传递到父组件的数据 html: <template> <div class="card-wrap"> <div class="foot"> <slot name="todo" v-bind:user="user

vue 作用域插槽

作用域插槽 作用域插件的目的就是:获取本组件的数据!. 示例代码todo-list组件: <ul> <li v-for="todo in filteredTodos" v-bind:key="todo.id" > <!-- 我们为每个 todo 准备了一个插槽, 将 `todo` 对象作为一个插槽的 prop 传入. --> <slot name="todo" v-bind:todo="todo

vue作用域插槽实践

引言 我在练手的时候发现后端返回的数据可以通过两种方式渲染 (自己遇到的 可能你都会 哈哈哈) 后端传过来的数据函数 from django.http import JsonResponse def record_detailed(request): all_record = models.Record.objects.all() lis = [] for obj in all_record: lis.append({ 'username': obj.username, 'task_name':

Vue组件之作用域插槽

写作用域插槽之前,先介绍一下Vue中的slot内容分发: 如果<child-component></child-component>标签之间没有插入那两个p标签的话,页面会显示子组件模板中定义的"<p>父组件如果没有插入内容,我将被显示</p>"这一则内容,但如果<child-component></child-component>标签之间有插入内容的话,则子组件模板中的<slot></slot&

436 vue slot:插槽基本使用,具名插槽,作用域插槽

1. 插槽 : 替换内容 / 分发内容 (1)占位,像出口<router-view></router-view>. (2)没有新的内容放进来,就用默认的. (3)<slot></slot>将被替换成组件内的对应子节点. 2. 基本使用 <el-car> <div>宝马发动机</div> </el-car> 组件的内部 02-插槽的基本使用.html <!DOCTYPE html> <html

Vue.js 源码分析(二十六) 高级应用 作用域插槽 详解

普通的插槽里面的数据是在父组件里定义的,而作用域插槽里的数据是在子组件定义的. 有时候作用域插槽很有用,比如使用Element-ui表格自定义模板时就用到了作用域插槽,Element-ui定义了每个单元格数据的显示格式,我们可以通过作用域插槽自定义数据的显示格式,对于二次开发来说具有很强的扩展性. 作用域插槽使用<template>来定义模板,可以带两个参数,分别是: slot-scope    ;模板里的变量,旧版使用scope属性 slot              ;该作用域插槽的nam

使用slot分发内容 作用域插槽

除非子组件模板包含至少一个<slot>插口,否则父组件的内容将会别丢弃.当子组件模板只有一个没有属性的slot时,父组件整个内容片断将插入到slot所在的DOM位置,并替换掉slot标签本身. 最初在 <slot> 标签中的任何内容都被视为备用内容.备用内容在子组件的作用域内编译,并且只有在宿主元素为空,且没有要插入的内容时才显示备用内容. 作用域插槽是一种特殊类型的插槽,用作使用一个(能够传递数据到)可重用模板替换已渲染元素. 在子组件中,只需将数据传递到插槽,就像你将 prop