V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
1010011010
V2EX  ›  Vue.js

[Vue] 组件内遍历的插槽要怎么引用?

  •  
  •   1010011010 · 2018-03-22 10:39:29 +08:00 · 3376 次点击
    这是一个创建于 2198 天前的主题,其中的信息可能已经有所发展或是发生改变。

    一个简单的遍历

    <div v-for="item of 5">
        <span ref="items_1">hi</span>
    </div>
    

    引用 items_1 是一个数组:5 个 span


    然后把遍历放在组件里

    <div is="list">
        <span ref="items_2">hi</span>
    </div>
    

    list 组件模板

    <div v-for="item of 5">
        <slot></slot>
    </div>
    

    引用 items_2 不是数组,是最后一个 span 元素,之前的都被覆盖了


    要如何引用所有遍历的项目?

    [JSFiddle 示例]

    8 条回复    2018-03-22 15:15:43 +08:00
    ipwx
        1
    ipwx  
       2018-03-22 10:57:58 +08:00
    我觉得是楼主的顶层设计出了问题,Vue 不该这么用才对啊。

    $refs are designed primarily for programmatic access in JavaScript - it is not recommended to rely on them in templates, because that would mean referring to state that does not belong to the instance itself. This would violate Vue ’ s data-driven view model.

    https://vuejs.org/v2/guide/migration.html?#Fragment-Instances-removed
    1010011010
        2
    1010011010  
    OP
       2018-03-22 11:04:15 +08:00
    @ipwx #1
    那个 item 是要用做组件的,所以要引用
    noe132
        3
    noe132  
       2018-03-22 11:07:11 +08:00
    正确的方式应该是在外面循环
    https://jsfiddle.net/57zns0yL/22/

    因为你并不知道子组件内部是一个怎样的逻辑。
    如果需要获取所有 items_2,应该在子组件上暴露一个接口调用
    https://jsfiddle.net/57zns0yL/30/
    1010011010
        4
    1010011010  
    OP
       2018-03-22 11:14:07 +08:00
    @noe132 #3
    那列表组件不是残废了吗
    列表组件负责生成和更新列表,vm 只需要定义里面的项目是什么样的

    2. 组件里引用不了,slot 不能引用
    1010011010
        5
    1010011010  
    OP
       2018-03-22 11:17:57 +08:00
    2. slot 插的是一个组件,要引用到那个组件
    1010011010
        6
    1010011010  
    OP
       2018-03-22 11:40:22 +08:00
    鬼鬼,瞬间沉底
    noe132
        7
    noe132  
       2018-03-22 11:58:08 +08:00
    不应该引用子组件内部的元素。
    组件就是做隔离的,你这样打破了隔离。

    需要通信,父组件通过 props 传值,子组件通过事件冒泡,或者暴露接口方法。

    你要想象组件对于父级就是一个黑盒。

    你要子组件渲染列表,那么你就传一个数组进去让他渲染。

    不知道你要引用到 slot 里的 span 做什么用途?
    noe132
        8
    noe132  
       2018-03-22 15:15:43 +08:00
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   3898 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 35ms · UTC 10:31 · PVG 18:31 · LAX 03:31 · JFK 06:31
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.