插槽就是子组件中的提供给父组件使用的一个占位符，用 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的标签。分为匿名插槽，具名插槽和作用域插槽
1匿名插槽
注册一个组件比如下面的cpn并在父组件中引用，你会看到子组件中有一个slot，这个slot就是插槽，什么意思呢？就是你在父组件中引用子组件的时候，然后在里面加任何东西，你加的东西就是显示的内容,slot标签里面还可以有默认值，当父组件引用子组件时，如果里面不写任何东西，会默认显示slot标签里面的内容
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="box">
<cpn>
<h1>123</h1>
</cpn>
<cpn></cpn>
</div>
<template id="cpn">
<div>
<p>我是组件</p>
<p>hahah </p>
<slot></slot>
</div>
</template>
<script>
var vm = new Vue({
el: "#box",
data(){
return{}
},
//在vue实例中注册子组件
components:{
cpn:{
template:"#cpn"
}
},
methods: {},
})
</script>
</body>
</html>
2具名插槽
具名插槽其实就是给插槽取个名字。一个子组件可以放多个插槽，而且可以放在不同的地方，而父组件填充内容时，可以根据这个名字把内容填充到对应插槽中。如果使用具名插槽，改变插槽的内容必须先说明要改变哪个插槽
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="box">
<cpn>
//只改变了中间插槽的内容
<span slot="center">标题</span>
</cpn>
</div>
<template id="cpn">
<div>
<slot name="left"><span>左边</span></slot>
<slot name="center"><span>中间</span></slot>
<slot name="right"><span>右边</span></slot>
</div>
</template>
<script>
var vm = new Vue({
el: "#box",
data(){
return{}
},
//在vue实例中注册子组件
components:{
cpn:{
template:"#cpn"
}
},
methods: {},
})
</script>
</body>
</html>
3作用域插槽
父组件替换插槽的标签，但是内容由子组件来提供
假如现在子组件包括了一组数组，languages:[‘js’,‘c’,‘c#’,‘swift’]
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="box">
<cpn>
</cpn>
<cpn></cpn>
</div>
<template id="cpn">
<div>
<ul>
<li v-for="item in languages">{{item}}</li>
</ul>
</div>
</template>
<script>
var vm = new Vue({
el: "#box",
data(){
return{}
},
//在vue实例中注册子组件
components:{
cpn:{
template:"#cpn",
data(){
return{
languages:['js','c','c#','swift']
}
}
}
},
methods: {},
})
</script>
</body>
</html>
假如现在第一个我想时一个列表，但是第二个我不想用列表的形式展示，我希望以- 分割,这个时候就要用到作用域插槽了，做法就是父组件拿到子组件的数据然后再根据你想要的方式展示数据
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="box">
<cpn>
</cpn>
<cpn>
<!-- //这里的slott会引用这个插槽对象 -->
<template slot-scope="slott">
<span v-for="item in slott.data.join('-')">{{item}}</span>
</template>
</cpn>
</div>
<template id="cpn">
<div>
<!-- //这里定义一个属性data，名字是随意的,我们要通过名字获取数据，这里的data指向的是language -->
<slot :data="languages">
<ul>
<li v-for="item in languages">{{item}}</li>
</ul>
</slot>
</div>
</template>
<script>
var vm = new Vue({
el: "#box",
data(){
return{}
},
//在vue实例中注册子组件
components:{
cpn:{
template:"#cpn",
data(){
return{
languages:['js','c','c#','swift']
}
}
}
},
methods: {},
})
</script>
</body>
</html>
标签：vue,return,cpn,插槽,组件,data 来源： https://blog.csdn.net/weixin_44960011/article/details/113776176
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。