cube-scroll-nav-bar 中的作用域插槽问题

Question

      <template slot="bar" slot-scope="props">
          <cube-scroll-nav-bar
            direction="vertical"
            :labels="props.labels"
            :txts="barTxts"
            :current="props.current"
          >
            <template slot-scope="props">
              <div class="text">
                <support-ico
                  v-if="props.txt.type>=1"
                  :size=3
                  :type="props.txt.type"
                ></support-ico>
                <span>{{props.txt.name}}</span>
                <span class="num" v-if="props.txt.count">
                  <bubble :num="props.txt.count"></bubble>
                </span>
              </div>
            </template>
          </cube-scroll-nav-bar>
        </template>

老师，我去官网看了以下相关的cube-scroll-nav-bar的api，我发现代码里：slot-scope="props"这里的props的定义有点模糊，为什么可以直接写成:labels="props.labels"去指定lables？（官网上的例子是通过data返回lables）

Answer 1

ustbhuangyi 2019-05-25 13:18:22

作用域插槽中的 props 你可以理解为子组件给父组件传递的一些数据，因为有些时候插槽的内容要依赖子组件的一些数据做渲染，通过 props 就可以拿到子组件的数据了。

• 提问者 6K切图仔 #1

  明白了，老师。感觉cube-ui设计的真好~