22. VUE 插槽-详解

插槽

一直对插槽不理解，今天学习，并整理一下，希望日后可以灵活运用。

（一）插槽内容

先简单来个例子，看一下插槽的租作用。

1.1 不使用插槽

父组件中：

  <div id="app">
      <h1>这是父组件：{{msg}}</h1>
      <child-component>你好</child-component>
  </div>

子组件中：

 <div>
        <h2>这是子组件，Child-Component</h2>
  </div>

结果：

 

 结论：

父组件引用子组件时，在子组件内写入：如（你好或者html），都不会显示。

1.2 使用插槽

父组件中：

  <div id="app">
      <h1>这是父组件：{{msg}}</h1>
      <child-component>你好</child-component>
  </div>

子组件中：

 <div>
        <h2>这是子组件，Child-Component</h2>
        <slot></slot>
  </div>

结果：

 

 结论：

Vue 实现了一套内容分发的 API，这套 API 的设计灵感源自 Web Components 规范草案，将 <slot>元素作为承载分发内容的出口。当组件渲染的时候，<slot></slot> 将会被替换为“你好”。插槽内可以包含任何模板代码，包括 HTML

1.3 包含html

父组件：

  <div id="app">
      <h1>这是父组件：{{msg}}</h1>
      <child-component>
          <span>slot 测试</span>
      </child-component>
  </div>

 

1.4 如果子组件没有<slot>

如果子组件中没有任何的<slot>，那么在父组件中引用子组件时，在子组件的起始标签和结束标签之间的任何内容都会被抛弃。

 

（二）后备内容

后备内容，即为没有为插槽设置任何内容时，显示的默认内容。

父组件：

没有为插槽设置任何内容

  <div id="app">
      <h1>这是父组件：{{msg}}</h1>
      <child-component></child-component>
  </div>

子组件：

在子组件中，添加后备内容

   <div>
        <h2>这是子组件，Child-Component</h2>
        <slot>
            <span>这是后备内容</span>
        </slot>
    </div>

结果：

 

 

但是如果设置插槽，后备内容则不会显示。

 

 （三）具名插槽

有的时候，我们需要多个插槽，例如：

父子件：

  <div id="app">
      <h1 style="text-align: center">这是父组件：{{msg}}</h1>
      <child-component>
          <template v-slot:header>
              <h3 style="text-align: center;color: blue">这是header部分</h3>
          </template>
          <p style="color: blueviolet;text-align: center">这是主题部分</p>
          <template v-slot:fooder>
              <h3 style="text-align: center;color: aqua">这是fooder部分</h3>
          </template>
      </child-component>
  </div>

子组件：

   <div>
        <h2 style="text-align: center">这是子组件，Child-Component</h2>
        <slot name="header"></slot>
        <slot></slot>
        <slot name="footer"></slot>
    </div>

（四）作用域插槽

父组件中插槽中，可以取到子组件中数据。

父组件：

在v-slot添加元素上的特性被称为插槽 prop

   <div id="app">
        <h2 >这是父组件！</h2>
        <child-slot>
            <template v-slot:default="user">
               <p>父组件中，取子组件中的值：{{user.user.lastName}}</p>
            </template>
        </child-slot>
    </div>

子组件：

在<slot>中，绑定数据v-bind:user="user"

  <div>
        <h2>这是子组件</h2>
        <span>FirstName:{{user.firstName}},LastName:{{user.lastName}}</span>
        <slot v-bind:user="user">{{user.lastName}}</slot>
    </div>

结果：

 

 （五）独占默认插槽的缩写语法

当子组件中，只提供默认插槽时，组件的标签才可以被当作插槽的模板来使用。这样我们就可以把 v-slot 直接用在组件上：

<child-slot>
            <template v-slot:default="user">
               <p>父组件中，取子组件中的值：{{user.user.lastName}}</p>
            </template>
  </child-slot>

也可以，简写为：

<child-slot>
            <template v-slot="user">
               <p>父组件中，取子组件中的值：{{user.user.lastName}}</p>
            </template>
</child-slot>