作用域和具名插槽同时使用插槽

64 阅读1分钟

父组件中

<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>