- 情况一
创建父页面main.vue和子页面list1.vue ,父页面中如下
<template>
<div>
<listA :data_child_A='data_parent_A'>
<button>按钮1</button>
</listA>
<listA :data_child_A='data_parent_A'>
<button>按钮2</button>
</listA>
</div>
</template>
<script>
import listA from '../components/list1.vue'
export default {
data(){
return{
}
},
methods:{
},
components:{
listA,
listB,
}
}
</script>
<style>
</style>
子页面中
<template>
<div>
<div>{{data_child_A}}</div>
<!-- <button>我是按钮</button> -->
<slot></slot>
</div>
</template>
<script>
export default {
props:{
data_child_A:Array
}
}
</script>
<style>
</style>
结果
- 情况二(如果子页面插槽中不为空,则父页面中显示子页面的标签不为空就显示父页面中的,为空就显示子页面中的内容)
父页面
<template>
<div>
<listA :data_child_A='data_parent_A'>
<button>按钮1</button>
</listA>
<listA :data_child_A='data_parent_A'>
<button>按钮2</button>
</listA>
<listA :data_child_A='data_parent_A'>
</listA>
<listA :data_child_A='data_parent_A'>
</listA>
</div>
</template>
<script>
import listA from '../components/list1.vue'
export default {
data(){
return{
}
},
methods:{
},
components:{
listA,
listB,
}
}
</script>
<style>
</style>
子页面中
<template>
<div>
<div>{{data_child_A}}</div>
<!-- <button>我是按钮</button> -->
<slot><button>我是组件中的按钮</button></slot>
</div>
</template>
<script>
export default {
props:{
data_child_A:Array
}
}
</script>
<style>
</style>
显示
- 情况三(具名插槽)给插槽分别命名,在父页面使用组件标签时候,改变其中一个
父页面中
<template>
<div>
<listA :data_child_A='data_parent_A'>
</listA>
</div>
</template>
<script>
import listA from '../components/list1.vue'
export default {
data(){
return{
}
},
methods:{
},
components:{
listA,
listB,
}
}
</script>
<style>
</style>
子页面中
<template>
<div>
<div>{{data_child_A}}</div>
<!-- <button>我是按钮</button> -->
<slot name='left'><button>左边</button></slot>
<slot name='center'><button>中间</button></slot>
<slot name='right'><button>右边</button></slot>
</div>
</template>
<script>
export default {
props:{
data_child_A:Array
}
}
</script>
<style>
</style>
显示