插槽的基本使用和作用域插槽

插槽的基本使用和作用域插槽"/>

插槽的基本使用和作用域插槽

1.编译作用域

父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。

即父子组件只能使用各自作用域的数据

2.插槽的后备内容（slot中默认配置内容）

可以在slot中提前设置一段内容作为默认值，当父组件提供插槽内容时将会被覆盖

<!--父组件 -->
<pop-cart class="pop-cart" ></pop-cart>

    <!--子组件-->
<slot name="cartPop">这是子组件插槽的默认内容</slot>

以下会被覆盖

      <pop-cart ref="popCart" class="pop-cart" ><template v-slot:cartPop>这是父组件插槽内容</template></pop-cart>

3.vm.$slots  API 的形式获取子组件插槽内容

vm.$slots用来访问被插槽分发的内容。（在父组件中获取子组件的虚拟DOM）

插槽没有命名时：v-slot:default获取所有子组件插槽的实例。如：this.$refs.child.$slots()

插槽有名字时：v-slot:name

<template>
<!-- BlogPost.vue -->
<div><slot name="header"></slot><slot></slot><slot name="footer"></slot></div>
</template>

<blog-post><template v-slot:header><h1>About Me</h1></template><p>Here's some page content, which will be included in vm.$slots.default, because it's not inside a named slot.</p><template v-slot:footer><p>Copyright 2016 Evan You</p></template><p>If I have some content down here, it will also be included in vm.$slots.default.</p>.
</blog-post><script>
import Vue from 'vue'
Vueponent('blog-post', {render: function (createElement) {var header = this.$slots.headervar body   = this.$slots.defaultvar footer = this.$slots.footerreturn createElement('div', [createElement('header', header),createElement('main', body),createElement('footer', footer)])}
})
</script>

4.作用域插槽

作用域插槽能够实现在父组件中获取子组件的数据

当前插槽绑定数据<slot :user="user" name="userCard">

父组件中通过<template v-slot:userCard="user">{{user}}</template>进行获取和使用

  v-slot:default默认插槽

  v-slot:header具名插槽

实际应用场景：

elementUI表格按钮中获取父组件中的数据，再传入按钮中

<!-- 子组件 -->
<span><slot :user="user">{{ user.lastName }}</slot>
</span>
<!-- 父组件中 -->
<current-user><template v-slot:default="slotProps">{{ slotProps.user.firstName }}</template>
</current-user>