美文网首页
具名作用域插槽

具名作用域插槽

作者: coderfl | 来源:发表于2021-10-11 11:31 被阅读0次

    父组件:

    <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

    相关文章

      网友评论

          本文标题:具名作用域插槽

          本文链接:https://www.haomeiwen.com/subject/qksloltx.html