关闭

Vue 中的作用域插槽

时间: 2019-02-04阅读: 1972标签: vue

作用域插槽

<div id="root">
    <child></child>
</div>
vue.component('child', {
    data(){
        return {
            list:[1,2,3,4]
        }
    },
    template: `<div>
                <ul>
                    <li v-for="item of list">{{item}}</li>
                </ul>
              </div>`,
})
let vm = new Vue({
    el: '#root'
})


上面代码,如果此时有个需:child组件在很多地方会被调用,我希望在不同的地方调用child的组件时,这个列表到底怎么循环,列表的样式不是child组件控制的,而是外部child模版站位符告诉我们组件的每一项该如何渲染,也就是说这里不用li标签,而是要用slot标签。

<div id="root">
    <child>
        <template slot-scope="props">       //固定写法,属性值可以自定义
            <li>{{props.item}}</li>         //用插值表达式就可以直接使用
        </template>    
    </child>
</div>
Vue.component('child', {
    data(){
        return {
            list:[1,2,3,4]
        }
    },
    template: `<div>
                <ul>
                    <slot v-for="item of list" :item=item></slot>
                </ul>
              </div>`,
})
let vm = new Vue({
    el: '#root'
})

<slot v-for="item of list" :item=item></slot>这段代码的意思是child组件去做一个列表的循环,但是列表项中的每一项怎么显示,我并不关心,具体怎么显示,外部你来告诉我. 

<template slot-scope="props"></template>这是一个固定写法,属性值可以自定义。它的意思是当子组件用slot时,会往子组件里传递一个item,从子组件接收的数据都放在了props上。

什么时候使用作用域插槽呢?当子组件循环或某一部分的dom结构应该由外部传递进来的时候,我们要用作用域插槽,使用作用域插槽,子组件可以向父组件的作用域插槽里传递数据,父组件如果想接收这个数据,必须在外层使用template模版占位符,同时通过slot-scope对应的属性名字,来接收你传递过来的数据,上面代码,传递一个一个item过来,在父组件的作用域插槽里面,就可以接收到这个item,就可以使用它了。


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/2000

Vue.js中的computed工作原理_深入理解 Vue的Computed计算属性

Computed 计算属性是 Vue 中常用的一个功能,但你理解它是怎么工作的吗?我们通过实现一个简单版的和Vue中computed具有相同功能的函数来了解computed是如何工作的。

vue 中 $set与$delete的使用

Vue无法检测property的添加或移除,由于Vue会在初始化实例时对property执行getter/setter转换,所以propterty必须在data对象上存在才能让Vue将它转换为响应式的。例如

Vuejs讲解之:响应式、过渡效果、过渡状态

Vue是一套构建用户界面的JS渐进式框架。 Vue 只关注视图层, 采用自底向上增量开发的设计。讲解js高级之响应式、过渡效果、过渡状态。

在 VueJS应用中管理用户权限

在需要身份验证的前端应用里,我们经常想通过用户角色来决定哪些内容可见。比如,游客身份可以阅读文章,但注册用户或管理员才能看到编辑按钮。在前端中管理权限可能会有点麻烦。你之前可能写过这样的代码

Vue2中render:h => h(App)的理解

render函数是渲染一个视图,然后提供给el挂载,如果没有render那页面什么都不会出来,Vue 在调用 render 方法时,会传入一个 createElement 函数作为参数,也就是这里的 h 的实参是 createElement 函数

vue 自定义指令

接下来我们来看一下钩子函数的参数 (即 el、binding、vnode 和 oldVnode)。但有一些是没有相对应的指令进行操作。在这里以progress(h5的新标签进度条)为例,向大家介绍Vue的一个用于指令扩展的方法:directive(自定义指令)。

Vue.js中 watch 的高级用法

上面的代码的效果是,当我们输入firstName后,wacth监听每次修改变化的新值,然后计算输出fullName。app.$watch调用后会返回一个值,就是unWatch方法,你要注销 watch 只要调用unWatch方法就可以了

实战技巧,Vue原来还可以这样写

今天产品经理又给我甩过来一个需求,需要开发一个图表,拿到需求,瞄了一眼,然后我就去echarts官网复制示例代码了,复制完改了改差不多了,改完代码长这样

Vue中的scoped及穿透方法

由于scoped看起来很美好,但是含有很多的坑,所以,不推荐不使用scoped属性,而通过在外层dom上添加唯一的class来区分不同组件。这种方法既实现了类似于scoped的效果,又方便修改各种第三方组件的样式,代码看起来也相对舒适

Vue项目使用CDN优化首屏加载

将引用的外部js、css文件剥离开来,不编译到vendor.js中,而是用资源的形式引用,这样浏览器可以使用多个线程异步将vendor.js、外部的js等加载下来,达到加速首开的目的。外部的库文件,可以使用CDN资源,或者别的服务器资源等。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!