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

具名作用域插槽

作者: 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

相关文章

  • 2.插槽

    匿名插槽 具名插槽 作用域插槽

  • vue----slot插槽

    插槽分类 匿名插槽 具名插槽 作用域插槽

  • Vue-使用插槽

    二。具名卡槽 作用域插槽:插槽循环时使用

  • Vue之深入理解插槽—slot, slot-scope, v-s

    Vue 2.6.0 以前Vue 2.6.0 以后具名插槽 slot具名插槽 v-slot作用域插槽 slot-sc...

  • vue3中的插槽

    插槽 默认插槽 具名插槽,v-slot可以简写为# 动态插槽 #[dynamicSlotName] 作用域插槽(...

  • 插槽

    默认插槽: 具名插槽:slot name='footer' 作用域插槽:v-slot===slot-scope 默...

  • vue中slot插槽的使用

    插槽的种类:1、默认插槽、具名插槽、作用域插槽、解构插槽、动态插槽几种。转原文:https://www.jians...

  • vue内置组件

    slot:插槽组件,可以指派name作为具名插槽,或者向外暴露属性,供外部调用成为作用域插槽component:通...

  • vue插槽

    默认插槽(没有名字的插槽) 具名插槽(带名字的插槽) 老版 2.6.0以前 新版 作用域插槽(父组件可以获取子组件...

  • vue组件之高级属性

    1.插槽 组件定义了外部样式,里面内容想要调用的时候再放 插槽用法: 具名插槽: 作用域插槽: 通过$ref获取的...

网友评论

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

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