父组件：
<template>
<div>
<child-component>
<template scope="scope">
<p>{{ scope.parentValue }}</p>
</template>
</child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
data() {
return {
parentValue: 'Hello, child!'
};
}
};
</script>
子组件 (ChildComponent.vue)：
<template>
<div>
<slot :parentValue="parentValue"></slot>
</div>
</template>
<script>
export default {
data() {
return {
parentValue: ''
};
}
};
</script>
在上面的示例中，父组件使用标签包裹了一个标签，并在中定义了一个插槽。在插槽中，使用{{ scope.parentValue }}来显示父组件传递的值。
子组件中使用标签来定义插槽，并通过:parentValue="parentValue"将子组件中的parentValue属性传递给插槽。
通过这种方式，父组件可以将数据传递给子组件的插槽，并且子组件可以在中接收和使用这些数据。
slot
vue2.6.0之前使用，现已经是被废弃的，2.6.0之后新增v-slot替代
用于标记往哪个具名插槽中插入子组件内容。
<body>
<div id="app">
<slot-test>插槽的使用</slot-test>
</div>
</body>
<script>
Vue.component('slot-test',{
template:`<div>
<slot></slot>
</div>`
});
</script>
slot-scope
vue2.6.0之前使用，现已经是被废弃的，2.6.0之后新增v-slot替代
用于将元素或组件表示为作用域插槽。attribute 的值应该是可以出现在函数签名的参数位置的合法的 JavaScript 表达式。这意味着在支持的环境中，你还可以在表达式中使用 ES2015 解构。它在 2.5.0+ 中替代了 scope。
<div id="app">
<!-- 需求在视图上显示firstname的值在不改变组件的插槽内容 -->
<!-- 1.在字符串模板中为需要访问的插槽绑定一个v-bind:自定义属性='要访问的数据'
2.在<template>标签中绑定指令v-slot或者slot-scope='自定义属性' -->
<slot-test>
<!-- 第一种v-slot 导入的vue文件必须是vue2.6.0以后的 -->
<!-- <template v-slot="slotDate">
{{slotDate.user.firstname}}
</template> -->
<!-- 第二种 slot-scope -->
<template slot-scope="slotDate">
{{slotDate.user.firstname}}
</template>
</slot-test>
</div>
<script>
Vue.component('slot-test',{
data:function(){
return {
user:{
firstname:'冰冰',
lastname:'范'
}
}
}
}
</script>
scope
被 2.5.0 新增的 slot-scope 取代。推荐 2.6.0 新增的 v-slot。
用于表示一个作为带作用域的插槽的 元素，它在 2.5.0+ 中被 slot-scope 替代。
除了 scope 只可以用于 元素，其它和 slot-scope 都相同。
v-slot
可放置在函数参数位置的 JavaScript 表达式 (在支持的环境下可使用解构)。可选，即只需要在为插槽传入 prop 的时候使用。
用法：提供具名插槽或需要接收 prop 的插槽 、
<template>
组件 (对于一个单独的带 prop 的默认插槽)
<body>
<div id="app">
<!-- 需求遍历父组件中数据通过子组件动态渲染到页面上 -->
<slot-frusts :list="list">
<template v-slot="fruits">
<span :class='fruits.info.id==2?"current":""'>{{fruits.info.name}}</span>
</template>
</slot-frusts>
</div>
<script>
Vue.component('slot-frusts',{
props:['list'],
template:`
<div>
<ul>
<li :key='item.id' v-for="(item,index) in list">
<slot :info='item'>{{item.id}}</slot>
</li>
</ul>
</div>`
});
let options={
el:'#app',
data:{
list:[{
id:1,
name:'apple'
},{
id:2,
name:'orange'
},{
id:3,
name:'banana'
}]
}
}
var vm=new Vue(options);
</script>
</body>
子组件
<template>
<div>
<h4>这是子组件</h4>
<slot name="myslot" :data='list'></slot>
</div>
</template>
<script>
export default {
name:'Son',
data(){
return{
list:[
{name:"Tom",age:15},
{name:"Jim",age:25},
{name:"Tony",age:13}
]
}
}
}
</script>
父组件
<template>
<div id="app">
<Main></Main>
<!-- <HelloWorld msg="Welcome to Your Vue.js App"/> -->
</div>
</template>
<script>
import Main from './components/Main.vue'
export default {
name: 'App',
components: {
Main
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
/* margin-top: 60px; */
}
</style>
结果
结论
获得了子组件slot里面的值