Vue中的作用域插槽 v-slot和slot-scope的具体写法

最新推荐文章于 2024-12-09 10:45:58 发布

原创最新推荐文章于 2024-12-09 10:45:58 发布 · 1.5k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vue #javascript #js #vue.js

Vue学习专栏收录该内容

1 篇文章

订阅专栏

本文探讨了Vue中作用域插槽的使用，包括v-slot和slot-scope。根据版本差异，介绍了如何在父组件中替换插槽标签并由子组件提供内容。在2.5.x及以下版本，推荐使用template标签，2.6及以上版本则可使用v-slot。此外，详细阐述了未命名和已命名插槽的数据调用方式。

Vue中的作用域插槽 v-slot和slot-scope的具体写法

在学习过程中因为Vue版本问题对slot-scope和v-slot的用法进行的一些探索

父组件替换插槽的标签，但是内容由子组件来提供
在子组件的模板中的插槽后定义
注意版本问题导致的不同写法：template标签和div标签，slot-scope和v-slot
- Vue2.5.x以下版本用template标签
- 2.5.x以上版本可以使用div标签
- 2.6以上版本可以使用v-slot
  - 如果没有对插槽进行命名，则v-slot="xxx"是声明该slot作用域名为xxx，之后的数据调用为xxx.data
  - 如果已经对插槽命名，将内容插入到对应的插槽并且获取子组件的数据，写法为v-slot:插槽名=“xxx”，之后的数据调用为xxx.data

具体代码，详见注释部分

<!DOCTYPE html>
<html lang="en" xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <cpn></cpn>
  <cpn>
    <!--目的是获取子组件中的pLanguage-->
    <!--Vue2.5.x以下版本用template-->
    <!--成功-->
<!--    <template slot-scope="slot">-->
<!--      <span v-for="item in slot.data">{{item}}-</span>-->
<!--    </template>-->
    <!--try 2.5.x以上版本可以使用div-->
    <!--成功-->
<!--    <div slot-scope="slot">-->
<!--      <span v-for="item in slot.data">{{item}}*</span>-->
<!--    </div>-->
    <!--try 2.6以上版本可以使用v-slot-->
    <!--如果没命名插槽，则v-slot="xxx"是声明该slot作用域名为xxx，之后的数据调用为xxx.data-->
<!--    <template v-slot="scope">-->
<!--      <span v-for="item in scope.data">{{item}}*</span>-->
<!--    </template>-->
    <!--如果已经对插槽命名，将内容插入到对应的插槽并且获取子组件的数据，写法如下-->
    <template v-slot:normal="scope">
      <span v-for="item in scope.data">{{item}}*</span>
    </template>
  </cpn>
  <cpn></cpn>
</div>


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

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:'#app',
    data:{
      message:'hello'
    },
    components:{
      cpn:{
        template:'#cpn',
        data(){
          return {
            pLanguages:['JavaScript','Java','Python','C#','Python','Go','Swift']
          }
        }
      }
    }
  })
</script>
</body>
</html>