<template>
<div>
<son>
<!-- <button>这是放在匿名插槽里的button</button> -->
<!-- <div slot="left">这是放在具名插槽左边的数据</div>
<div slot="right">这是放在具名插槽右边的数据</div>-->
<!-- 这是作用域插槽的内容 -->
<template v-slot="slot">
<span>{{slot.data.join('-')}}</span>
</template>
</son>
</div>
</template>
<script>
import son from "./son";
export default {
nane: "father",
components: {
son,
},
};
</script>
<style>
</style>
<template>
<div>
这是son组件
<!-- 匿名插槽 -->
<!-- <slot></slot> -->
<!-- 具名插槽 -->
<!-- <slot name="left"></slot>
<slot name="right"></slot>-->
<!-- 作用局插槽 -->
<slot :data="laguage"></slot>
</div>
</template>
<script>
export default {
name: "son",
data() {
return {
laguage: ["go", "java", "python"],
};
},
};
</script>
<style>
</style>