精华内容
下载资源
问答
  • 主要介绍了Vue作用域插槽slot-scope实例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 主要介绍了Vue作用域插槽实现方法及作用详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
  • 插槽,也就是slot,是组件的一块HTML模板,这块模板显示不现实、以及怎样显示由父组件来决定。这篇文章主要介绍了浅析vue插槽和作用域插槽的理解,需要的朋友可以参考下
  • vue 作用域插槽

    2020-05-12 10:02:23
    先看下 代码 就会明白 父组件 <template> <div class="wrap"> <Temp :message="books"> <template slot-scope="books" slot="book"> <li>{{books.item}}<.../div

    先看下 代码 就会明白

    父组件

    <template>
      <div class="wrap">
         <Temp :message="books">
            <template slot-scope="books" slot="book">
              <li>{{books.item}}</li>
            </template>
         </Temp>
       </div>
     </template>
    <script>
    import Temp from '../components/temp'
    export default {
      name: 'practice',
      components: { Temp },
      data () {
        return {
          books: [
            { name: 'aaa'},
            { name: 'bbb'},
            { name: 'ccc'}
          ]
        }
      },

    子组件:

    template>
      <div class="wrapInner">
        <ul>
         <slot v-for="item in message" name="book" :item="item.name">
         </slot>
        </ul>
      </div>
    </template>
    
    <script>
    export default {
      name: 'temp',
      props: ['message'],
      data: function () {
        return {
    
        };
      },

    效果:

    插槽,也就是slot,是组件的一块HTML模板,这块模板显示不现实、以及怎样显示由父组件来决定。

    插槽模板是slot,它是一个空壳子,因为它显示与隐藏以及最后用什么样的html模板显示由父组件控制。但是插槽显示的位置由子组件自身决定,slot写在组件template的哪块,父组件传过来的模板将来就显示在哪块。这样就使组件可复用性更高,更加灵活。我们可以随时通过父组件给子组件加一些需要的东西。

    作用域插槽其实就是带数据的插槽。当一个组件需要重复使用时可以用到;

    原来父组件可以通过绑定数据传递给子组件。作用域插槽就可以通过子组件绑定数据传递给父组件。

    slot-scope就相当于是一个对象,这个对象里面的数据就是子组件插槽绑定传上来了。

    作用域插槽适合的场景是至少包含三级以上的组件层级,是一种优秀的组件化方案!

    作用域插槽是一种特殊类型的插槽,用作一个 (能被传递数据的) 可重用模板,来代替已经渲染好的元素

     

     

    展开全文
  • vue作用域插槽,你真的懂了吗?

    千次阅读 多人点赞 2019-03-08 18:10:29
    在网上搜了很多关于作用域插槽的解释,感觉没有写得很具体的吧,我认为应该对组件化有很深的理解才会触及到这个问题吧,这里也分享下我自己对于slot-scope的一点理解。 slot大家看看文档都懂了,无非就是在子组件中...

    前言

    在网上搜了很多关于作用域插槽的解释,感觉没有写得很具体的吧,我认为应该对组件化有很深的理解才会触及到这个问题吧,这里也分享下我自己对于slot-scope的一点理解。

    • slot大家看看文档都懂了,无非就是在子组件中挖个坑,坑里面放什么东西由父组件决定。
    // 子组件
    <template>
      <slot>来啊,我这里挖了个坑</slot>
    </template>
    
    // 父组件
    <template>
      <child>
       <!-- 传入子组件的自定义内容,会填入到子组件的slot插槽中 -->
        <span>我在这放个span,乐意的话,放个组件都行</span>
      </child>
    </template>
    
    1. 给slot传入普通文本

    slot传入普通文本

    1. 给slot传入了一个图像处理组件
      slot传入普通文本
    • 具名插槽也很简单,比如有多个插槽,我作为父组件,肯定想区别子组件中的几个插槽,那就要用slot标签的name属性来标识了,而父组件要决定在什么插槽里面放什么内容,就要将name的值赋值给slot属性传递给对应的插槽。如果slot没有name属性,就是匿名插槽了,而父组件中不指定slot属性的内容,就会被丢到匿名插槽中。
    // 子组件
    <template>
        <section>
            <slot name="article-title">这里放标题</slot>
            <slot>这里放作者</slot>
            <slot name="article-content">这里放文章内容</slot>
        </section>
    </template>
    
    // 父组件
    <template>
        <section>
            <slot-child>
                <h1 slot="article-title">vue作用域插槽,你真的懂了吗?</h1>
                <p slot="article-content">好像有点懂了</p>
                <div>王五</div>
            </slot-child>
        </section>
    </template>
    
    • 最难理解的是作用域插槽。看了文档说明的朋友可能还会有点晕,大概是说在作用域插槽内,父组件可以拿到子组件的数据。子组件可以在slot标签上绑定属性值,如:
    <slot :nickName="'Tusi'"></slot>
    

    而父组件通过slot-scope绑定的对象下拿到nickName的值。

    <template>
        <section>
            <slot-child>
                <template slot-scope="scope">
                    <div>{{scope.nickName}}</div>
                </template>
            </slot-child>
        </section>
    </template>
    

    这里大家应该都有疑问。这有什么用?我在子组件用$emit向父组件传递数据不就行了?

    关于作用域插槽的一点理解

    我觉得要从组件之间的数据流向来思考作用域插槽的应用场景。

    假设第一个场景,需要你写一个商品卡片组件,并通过循环去展示多个卡片,并且要求能响应每个卡片上的图片或者其他内容的点击事件而跳转到商品详情页,你会怎么写?

    淘宝商品列表

    我会使用如下的处理方式,首先将商品卡片写成一个组件Commodity.vue,而在CommodityList.vue中用一个v-for来处理商品卡片列表的展示。

    <commodity v-for="(item,index) in commodities" @clickCommodity="onCommodityClick"></commodity>
    

    Commodity组件通过$emit像父组件传递clickCommodity事件,并携带商品数据,父组件即可在onCommodityClick方法中得到数据,进行业务处理,这样便完成了一个基本的由子到父的数据传递。

    如果再往上抽象一下呢?比如我有多个运营栏目,像淘宝首页有“有好货”,“爱逛街”这样两个栏目,每个栏目下都需要有一个商品卡片列表,那么商品卡片列表CommodityList.vue就要抽成组件了。而这个包含多个运营栏目的vue组件我假设它叫ColumnList.vue,在其中通过v-for调用了CommodityList组件。

    淘宝运营栏目列表

    注意:业务来了,我希望把点击商品卡片的业务放在ColumnList.vue中处理。你们想象一下要怎么做?一种土办法就是商品按钮点击时,Commodity组件$emit通知CommodityList.vue,而CommodityList接着把事件用$emit往上抛,那么ColumnList.vue就能处理这个点击事件了。这样做完全没有问题,但是显得子组件很不纯粹,跟业务都扯上关系了。

    那么如何优雅地解决这个问题呢?这个时候,作用域插槽真正派上用场了。

    通过作用域插槽将本应该由CommodityList处理的商品卡片点击业务onCommodityClick提升到ColumnList处理。

    <el-row :gutter="20">
            <el-col :span="12" v-for="(column, index) in columnList" :key="index">
                <el-card class="box-card card-column">
                    <div slot="header" class="clearfix">
                        <span>{{column.columnName}}</span>
                    </div>
                    <commodity-list :commodities="column.commodityList">
                        <template slot-scope="scope">
                        <!-- 这里只需要给Commodity组件传入数据,响应Commodity组件的clickCommodity事件即可。
                            事件不必携带参数,完全符合父到子的数据流向,而不会发生子组件又给父组件反向发数据的情况 -->
                            <commodity :modityData="scope.row" @clickCommodity="onCommodityClick(scope.row)"></commodity>
                        </template>
                    </commodity-list>
                </el-card>
            </el-col>
    </el-row>
    

    而CommodityList组件内部应该是改造成这样,slot接收来自父组件的商品卡片组件,这里面不涉及关于商品组件的业务,只关注其他业务和布局即可。最终就实现了组件和业务的剥离,这也是组件化的精髓所在吧。不知道有没有帮到您呢?

    <el-row :gutter="20">
            <el-col :span="8" v-for="(item, index) in commodities" :key="index" style="margin-top:20px;">
                <slot :row="item"></slot>
            </el-col>
    </el-row>
    

    这是我实现的效果,忽略样式吧,原理都懂了,做个漂亮的卡片有多难?
    淘宝运营栏目列表
    淘宝运营栏目列表

    总结一下,作用域插槽适合的场景是至少包含三级以上的组件层级,是一种优秀的组件化方案!

    展开全文
  • vue作用域插槽使用详解

    千次阅读 2019-05-01 14:40:05
    今天看vue官方教程中的作用域插槽的内容,看了半天都没理解内容,只好动手码代码验证理解。动手是最能促进理解的方法,再去看原文,你会发现都是翻译惹的祸,翻译的真是有点差劲。 作用域插槽,主要是为了在父组件...

    今天看vue官方教程中的作用域插槽的内容,看了半天都没理解内容,只好动手码代码验证理解。动手是最能促进理解的方法,再去看原文,你会发现都是翻译惹的祸,翻译的真是有点差劲。

    作用域插槽,主要是为了在父组件中访问子组件中的数据而提出来的一种方案。 

    一、<slot> 元素上动态绑定要在外面访问的 对象

    首先要在子组件中<slot> 元素上动态绑定一个你要在外面访问的 对象属性,例如下面的例子中我们要在父组件中访问user对象。如果不进行绑定,在外面是访问不了的

    Vue.component("slot_demo",{
                data: function() {
                   return {
                       user : {
                           firstName: "Liu"
                           , lastName: "Tao"
                       }
                    }
                },
                template : `
                   <span>
                      <span>子组件:</span>
                      <slot :user="user">{{ user.lastName }}</slot>
                    </span>
                `
            })

     二、父组件中定义一个名字,通过该名字访问子组件中的对象

    名字可以随便起,比如下面的名字为slotInnerData,那么想访问上面第一步中的子组件绑定的user对象,只需要在正常的访问形式之前加入该名字限定就可以访问了。

    <div id="slot_demo" >
                <slot_demo v-slot:default="slotInnerData">
                    {{slotInnerData.user.firstName}}
               </slot_demo>
            </div>

    三、更方便的访问方式

    上面的访问方式要多写一个名称,官方文档中给出了一种更方便的访问组件的方式。直接使用花括号引用子组件中的对象名称,然后就可以自由的访问了。

     <slot_demo v-slot:default="{user}">
                    {{user.firstName}}
               </slot_demo>

    四、在父组件中使用默认对象值

    可以定义默认内容,用于插槽 prop 是 undefined 的情形。第一节中说了在slot中必须绑定要在父组件中访问的对象,如果没有绑定,那么使用默认对象值的方式就可以派的上用场了。

     <div id="slot_demo" >
               <slot_demo v-slot:default="{user = {firstName:'Guest'}}">
                    {{user.firstName}}
               </slot_demo>
            </div>

    此时,如果子组件没有绑定user对象,那么上面代码中的user就是取的这里面的默认值。

    五、结束

    以上就是vue中作用域插槽使用上的关键知识点。当然它的更大用处,引用官网的一句话来说明

    插槽 prop 允许我们将插槽转换为可复用的模板,这些模板可以基于输入的 prop 渲染出不同的内容。这在设计封装数据逻辑同时允许父级组件自定义部分布局的可复用组件时是最有用的。

    展开全文
  • Vue作用域插槽详解

    2019-06-04 10:52:57
    作用域插槽使用场景: 用于将子组件的数据显示到父组件,但样式,由父组件决定。 代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </...

    作用域插槽使用场景:

    用于将子组件的数据显示到父组件,但样式,由父组件决定。
    代码:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    	</head>
    	<body>
    		<div id="app">
    			<child>
    				<template slot-scope="props">
    					<h1>{{props.item}}</h1>
    				</template>
    			</child>
    		</div>
    		<script src="https://cdn.jsdelivr.net/npm/vue"></script>
    		<script type="text/javascript">
    			Vue.component("child",{
    				data(){
    					return{
    						list:[1,2,3,4]
    					}
    				}
    				,template:`<div>
    					<ul>
    						<slot v-for='item of list' :item=item></slot>
    					</ul>
    				</div>`
    				
    			})
    			var app=new Vue({
    				el:"#app"
    			})
    		</script>
    	</body>
    </html>
    
    
    展开全文
  • Vue作用域插槽的使用

    2020-01-09 15:37:37
    vue作用域插槽用法
  • VUE作用域插槽详解(、v-slot、slot-scope)

    千次阅读 多人点赞 2020-08-28 14:13:51
    什么是插槽插槽就是子组件中的提供给父组件使用的一个占位符,用 表示,父组件可以在这个占位符中填充任何模板代码,如 HTML、组件等,填充的内容会替换子组件的标签。插槽显不显示、怎样显示是由父组件来控制的...
  • Vue作用域插槽

    2020-07-27 11:29:42
    1、slot大家看看文档都懂了,无非就是在子组件中挖个坑,坑里面放什么东西由父组件决定...-- 传入子组件的自定义内容,会填入到子组件的slot插槽中 --> <span>我在这放个span,乐意的话,放个组件都行</sp
  • Vue 作用域插槽

    2021-02-05 15:23:34
    链接:SentMes作者书写的作用插槽链接 https://www.jianshu.com/p/0c9516a3be80 来源:简书 ** ** ** 十分感谢原作者,写的十分详细,原作者辛苦了! 深入理解vue中的slot与slot-scope ** 写在前面 vue中关于插槽...
  • <!... <... <head> ...meta charset="UTF-8">...meta name="viewport" content="width=device-width, initial-scale=1.0">...script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>.
  • vue作用域插槽

    2021-07-20 14:38:02
    作用域插槽: 在封装子组件的时候,通过 slot 标签在结构中预留出位置 ;父组件引用子组件的时候,通过slot 来将自己想要结构或者数据 传入 ,这样就可以在子组件预留的位置出现对应的内容 (简单说:子组件在自己的...
  • 作用域插槽解决上面问题(Vue2.5旧语法,Vue3.0不再包含) 用作用域插槽解决上面问题(Vue2.6+新语法,Vue3.0支持) 前篇:Vue中的插槽和具名插槽(vue 2.5已淘汰的语法和vue3.0支持语法对比) 有了插槽和具名...
  • 作用域插槽 父组件替换插槽的标签,但是内容是由子组件来提供 <div id="app"> <cpn></cpn> <cpn> <template slot-scope="slot"> // slot-scope=" "为固定写法,template将用来...
  • 主要介绍了Vue组件之作用域插槽,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • vue作用域插槽例子

    千次阅读 2018-03-14 16:07:43
    前端小白捣腾了半天,官网的例子很精简但是对新手不友好啊,命名看的我云里雾里,自己简单改了一下1.App.vue&...--作用域插槽也可以具名!--&gt; &lt;li slot="slotName" slot-s
  • 最近在官方文档中看到,vue新增了一种插槽机制,叫做作用域插槽。要求的版本是2.1.0+。 首先来说一下:顾名思义,所谓作用域插槽,主要就在作用域,需要注意的是(以下几点看不懂不要紧,配合下面的例子,你会一看...
  • 而看vue教程中作用域插槽就是这么用的,很疑惑! 上代码: 子组件: <template> <div class="zs"> 我是HelloWorld2的孩子,这是祖先给我的{{toZS}} <slot></slot> <slot name=...
  • 作用域插槽,父组件调用子组件时,直接引用组件插入,再进行实际需要的样式渲染 二、使用步骤 1.引入库 代码如下(示例): <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &...
  • vue作用域插槽slot-scope详解

    万次阅读 热门讨论 2018-05-31 17:42:45
    了解vue的同学都知道插槽分为单个插槽,具名插槽,还有作用域插槽,前两种比较简单这里就不赘述了,今天的重点是讨论作用域插槽。 简单来说,前两种插槽的内容和样式皆由父组件决定,也就是说显示什么内容和怎样...
  • 主要介绍了从组件封装看Vue作用域插槽的实现,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • vue作用域插槽简栗

    2019-04-04 10:52:30
    Vue . component ( 'zhangsan' , { data : function ( ) { return { name : 'lisi' } } , template : ` <slot :user="name"></slot> ` } ) new Vue ( { el : '#app' ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 7,803
精华内容 3,121
关键字:

vue作用域插槽

vue 订阅