Vue.js——作用域插槽的使用——2020.12.8
程序员文章站
2022-03-21 08:41:04
作用域插槽：准备一丶知识预备二丶作用域插槽：使用三丶案例代码四丶运行结果——钟鼓馔玉不足贵，但愿长醉不愿醒——一丶知识预备（一）作用域插槽是slot一个比较难理解的点，而且官方文档说的又有点不清晰（二）这里，我们用一句话对其做一个总结：然后我们在后续的案例中来体会父组件替换插槽的标签，但是内容由子组件来提供（三）我们先提一个需求子组件中包含一组数据，比如：pLanguages：[‘JavaScript’,‘Python’,‘Swift’,‘Go’,‘C++’]需要在多个页面进行展示某...
作用域插槽：准备
一丶知识预备
（一）作用域插槽是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>
四丶运行结果
——钟鼓馔玉不足贵，但愿长醉不愿醒——
本文地址：https://blog.csdn.net/weixin_43402353/article/details/110874826