Vue学习（五）组件的插槽

Vue学习（五）组件的插槽

Day1

---

---

前言

此文章根据官方文档及些网络资料编写，仅供个人使用。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、插槽的概念

slot，翻译过来就是插槽的意思。其目的是让我们封装的组件更加多样化和扩展性。

1.1简单使用

  <div id="app">
    <cpn></cpn>
    <br />
    <cpn>
      <div>我是div!!</div>
    </cpn>
  </div>
  <!-- 模板 -->
  <template id="cpn">
    <div>
      <h2>组件</h2>
      <p>组件内容</p>
      <slot><button>按钮</button></slot>
    </div>
  </template>

1.2 具名插槽slot

根据插槽名替换

  <div id="app">
    <cpn><span slot="center">标题</span></cpn>
    <cpn><button slot="left">返回</button></cpn>
  </div>
  <!-- 模板 -->>
  <template id="cpn">
    <div>
      <slot name="left"><span>左边</span></slot>
      <slot name="center"><span>中间</span></slot>
      <slot name="right"><span>右边</span></slot>
    </div>
  </template>

1.3 插槽案例

使用slot-scope获取子组件中的pLanguages，然后以自己想要的方式输出。

  <cpn></cpn>

  <cpn>
    <!--目的是获取子组件中的pLanguages-->
    <template slot-scope="slot">
      <!--<span v-for="item in slot.data"> - {{item}}</span>-->
      <span>{{slot.data.join(' - ')}}</span>
    </template>
  </cpn>

  <cpn>
    <!--目的是获取子组件中的pLanguages-->
    <template slot-scope="slot">
      <!--<span v-for="item in slot.data">{{item}} * </span>-->
      <span>{{slot.data.join(' * ')}}</span>
    </template>
  </cpn>
  <!--<cpn></cpn>-->
</div>

<template id="cpn">
  <div>
    <slot :data="pLanguages">
      <ul>
        <li v-for="item in pLanguages">{{item}}</li>
      </ul>
    </slot>
  </div>
</template>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊'
    },
    components: {
      cpn: {
        template: '#cpn',
        data() {
          return {
            pLanguages: ['JavaScript', 'C++', 'Java', 'C#', 'Python', 'Go', 'Swift']
          }

总结

Vue学习（一）插值操作

Vue学习（二）动态绑定与事件监听

Vue学习（三）循环遍历与表单绑定

Vue学习（四）组件与组件间的通信

Vue学习（五）组件的插槽