作用域插槽

151 阅读1分钟

- 在组件内部定义数据,将数据传递给插槽的结构

  • 通过给slot动态绑定属性

    <template id="my-li">
        <ul>
          <li v-for="item in arr">
            <slot :row="item"></slot>
          </li>
        </ul>
      </template>
    

【注】scope n. 范围;余地;视野;眼界;导弹射程 vt. 审视

  • 插槽内部:通过slot-scope=“scope”来接收

    <my-li>
      <template slot-scope="scope">
        <p>{{scope.row}}</p>
      </template>
    </my-li>
    <my-li>
      <template slot-scope="scope">
        <a href="04-侦听器.html">{{scope.row}}</a>        
      </template>
    </my-li>