vue 插槽

///child.vue small
<template>
  <div>
    <!-- <slot :todos='todos'></slot> -->
    <h1 v-for="(item, index) of todos" :key="index">{{item.text}}</h1>
  </div>
</template>
///test.vue middle
<template>
  <div>
    <child :todos='todos'>
      <!-- <template slot-scope="slotProps">
        <h1 v-for='(item,index) of slotProps.todos' :key="index">{{item.text}}</h1>
      </template> -->
    </child>
    <slot name="footer"></slot>
    <slot name='header' ></slot>
  </div>
///App.vue  big
    <test>
      <header slot='header'>header</header>
      <footer slot="footer">footer</footer>
    </test>

在父组件调用子组件的时候,可以给子组件放置插槽内容,可以用<header slot='header'>header</header> <footer slot="footer">footer</footer>这种形式,加上slot,在子组件的模板中,加上相对应的插槽名字<slot name="footer"></slot> <slot name='header' ></slot>

插槽作用域

在父组件调用子组件的时候,给子组件传递属性:todos='todos',子组件在props中接受属性todos,在模板中定义<slot :todos='todos' :color='color'></slot>,把属性信息传递到父组件的slot-scope中的对象slotProps(也可以用解构赋值{todos, color}),在父组件当中就可以通过slotProps取到子组件属性中的值

子组件可以通过触发event事件,或者插槽的方式给父组件传递值
父组件通过定义属性的方式给子组件的props中添加属性

推荐阅读更多精彩内容

  • 之前对插槽的理解并不深入,参考官网理解一下~ 单个插槽 除非子组件模板包含至少一个 插口,否则父组件的内容将会...
    ddai_Q阅读 20,436评论 1 12
  • 这篇笔记主要包含 Vue 2 不同于 Vue 1 或者特有的内容,还有我对于 Vue 1.0 印象不深的内容。关于...
    云之外阅读 2,934评论 0 30
  • 此文基于官方文档,里面部分例子有改动,加上了一些自己的理解 什么是组件? 组件(Component)是 Vue.j...
    陆志均阅读 1,931评论 5 15
  • “没有了偏见,留给他们的就是无限。” 摄制组拍了一则小广告,并在广告结束时这么说。 不要通过简历就断言一个人没有能...
    柒诺阅读 302评论 8 8
  • 在以前的一篇文章《资本寒潮举起了“屠刀”,你该如何成为那只幸运的“飞猪”?》一文中,老帕提到了女性“性心理需求”的...
    情绪思维阅读 133评论 0 1