Vue.js——作用域插槽的使用——2020.12.8

最新推荐文章于 2024-05-28 17:25:55 发布

Blockchain_KT

最新推荐文章于 2024-05-28 17:25:55 发布

阅读量427

点赞数 1

分类专栏： Vue.js-实战开发文章标签： vue python java javascript 大前端

本文链接：https://blog.csdn.net/weixin_43402353/article/details/110874826

版权

Vue.js-实战开发专栏收录该内容

64 篇文章 46 订阅

订阅专栏

作用域插槽：准备

一丶知识预备

（一）作用域插槽是slot一个比较难理解的点，而且官方文档说的又有点不清晰
（二）这里，我们用一句话对其做一个总结：然后我们在后续的案例中来体会

父组件替换插槽的标签，但是内容由子组件来提供

（三）我们先提一个需求

子组件中包含一组数据，比如：pLanguages：[‘JavaScript’,‘Python’,‘Swift’,‘Go’,‘C++’]
需要在多个页面进行展示
- 某些页面是以水平方向一一展示的
- 某些界面是以列表形式展示的
- 某些界面直接展开一个数组
内容在子组件，希望父组件告诉我们如何展示，怎么办呢？
- 利用slot作用域插槽就可以了

二丶作用域插槽：使用

（一）在父组件使用我们子组件时，从子组件中拿到数据

我们通过<template slot-scope="slot">获取到slot的属性
在通过slot.data就可以获取到我们传入的data了

三丶案例代码

<!--作者：key-->
<!--浏览工具：Chrome-->
<!--开发工具：WebStorm-->
<!--开发时间：2020/12/8 15:49-->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
<!--  列表形式展示-->
  <cpn></cpn>

<!--  水平形式展示-->
  <cpn>
<!--    目的是获得子组件中的pLanguages-->
<!--    Vue2.5.x以下必须使用template模板-->
    <template slot-scope="slot">
      <span v-for="item in slot.data">{{item}}——</span>
      <br>
      <span>{{slot.data.join('——')}}</span>
    </template>
  </cpn>
</div>

<template id="cpn">
  <div>
    <slot :data="pLanguages">
      <ul>
        <li v-for="item in pLanguages">{{item}}</li>
      </ul>
    </slot>
    <hr>
  </div>
</template>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  const app = new Vue({
    el:"#app",
    data:{

    },
    components:{
      cpn:{
        template:"#cpn",
        data(){
          return{
            pLanguages:['JavaScript','C++','Java','Python','Go','Solidity']
          }
        }
      },
    }
  })
</script>
</body>
</html>

四丶运行结果

在这里插入图片描述

——钟鼓馔玉不足贵，但愿长醉不愿醒——

Blockchain_KT

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
5
评论
Vue.js——作用域插槽的使用——2020.12.8

作用域插槽：准备一丶知识预备二丶作用域插槽：使用三丶案例代码四丶运行结果——钟鼓馔玉不足贵，但愿长醉不愿醒——一丶知识预备（一）作用域插槽是slot一个比较难理解的点，而且官方文档说的又有点不清晰（二）这里，我们用一句话对其做一个总结：然后我们在后续的案例中来体会父组件替换插槽的标签，但是内容由子组件来提供（三）我们先提一个需求子组件中包含一组数据，比如：pLanguages：[‘JavaScript’,‘Python’,‘Swift’,‘Go’,‘C++’]需要在多个页面进行展示某
复制链接

扫一扫