vue作用域插槽（slot-scope）使用示例

最新推荐文章于 2025-06-13 16:11:38 发布

seayehin

最新推荐文章于 2025-06-13 16:11:38 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签： slot-scope vue作用域插槽 vue插槽

本文链接：https://blog.youkuaiyun.com/SEAYEHIN/article/details/88870066

Vue 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一个使用Vue.js实现的作用域插槽示例。通过父组件传递一个包含多个属性的对象到子组件，并在子组件中利用v-for循环遍历这个对象。在每一个遍历项中，父组件可以通过插槽获取到当前项的索引、键名和值。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>作用域插槽</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
</head>
<body>
  <div id="root">
    <child :info="userInfo">
      <li slot-scope="props">
          {{props.i}}---{{props.k}}---{{props.v}}
      </li>
    </child>
  </div>

  <script>
    Vue.component('child', {
      props:{
        info: Object
      },
      data(){
        return {
          list: this.info
        }
      },
      template: `<div>
                    <ul>
                      <slot v-for="(v, k, i) of list" :v="v" :k="k" :i="i"></slot>
                    </ul>
                 </div>`,
    })
    
    var vm = new Vue({
      el: '#root',
      data:{
        userInfo: {
          name: 'sinoey',
          gender: 'male',
          address: 'beijingshi',
          tel: 19912345678
        }
      }
    })
  </script>

</body>
</html>