具名作用域插槽

2021-10-11  本文已影响0人  coderfl

父组件:

<template>
  <table-cpt>
    <template v-slot:aaa="bbb">
      666 - {{bbb.ccc}} - {{bbb.eee}}
    </template>
  </table-cpt>
</template>
<script>
import TableCpt from 'views/table/TableCpt';
export default {
  components: { TableCpt }
}
</script>

子组件:

<template>
  <div>
    <div>unDefault - <slot name="aaa" :ccc="ddd" :eee="'eee'" /></div>
    <div>default<slot /></div>
  </div>
</template>

<script>
export default {
  name: 'TableCpt',
  data() {
    return {
      ddd: {
        a: 1,
        b: 2,
        c: 3
      }
    };
  }
};
</script>
结果: image.png
上一篇下一篇

猜你喜欢

热点阅读