作用域插槽

最新推荐文章于 2024-06-05 23:04:32 发布

原创最新推荐文章于 2024-06-05 23:04:32 发布 · 252 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

vue 专栏收录该内容

5 篇文章

订阅专栏

本文通过实例展示了如何在Vue中使用作用域插槽来传递和接收数据，实现父组件与子组件间的交互。重点介绍了作用域插槽的语法和用法，包括如何在父组件中使用<slot>标签定义插槽，并通过属性传递数据，以及在子组件中如何使用这些数据。

作用域插槽

<div id="app">
  <cpn></cpn>

  <cpn>
    <!--目的是获取子组件中的pLanguages-->
    <template slot-scope="slot">
      <!--<span v-for="item in slot.data"> - {{item}}</span>-->
      <span>{{slot.data.join(' - ')}}</span>
    </template>
  </cpn>

  <cpn>
    <!--目的是获取子组件中的pLanguages-->
    <template slot-scope="slot">
      <!--<span v-for="item in slot.data">{{item}} * </span>-->
      <span>{{slot.data.join(' * ')}}</span>
    </template>
  </cpn>
  <!--<cpn></cpn>-->
</div>

<template id="cpn">
  <div>
    <slot :data="pLanguages">
      <ul>
        <li v-for="item in pLanguages">{{item}}</li>
      </ul>
    </slot>
  </div>
</template>