父组件中
<template>
<div id="app">
<child>
<template v-slot:title="{row}">
<p>作用域和具名插槽同时使用插槽1</p>
{{ row.name }}
</template>
<template v-slot:title1="{row}">
<p>作用域和具名插槽同时使用插槽2</p>
{{ row.age }}
</template>
</child>
</div>
</template>
<script>
import child from './components/child.vue'
export default {
name: 'App',
components: {
child
}
}
子组件中
<template>
<div class="child">
<h3>子组件:匿名插槽</h3>
<slot name="title" :row="defaultobj"></slot>
<div class="test">
<slot name="title1" :row="defaultobj"></slot>
</div>
</div>
</template>
<script>
export default {
name: 'child',
data () {
return {
defaultobj: {
name: "WR",
age: 18
}
}
},
}
</script>
<style scoped>
.child {
background: #fbd4fc;
}
.test {
margin-top: 110px
}
</style>