Insert: thorn meat also. From the hand to the dumbrs.

Trough: food for animals. From the wood cao voice.

“Slot” comes from componentization. Some frameworks do not implement slot, but they do have functions of type slot. React props is a powerful way to pass JSX and children.

Is realized in the front of the component is not only the React/Vue/presents/Svelte/small programs, there are WebComponent.

WebComponent is a different set of technologies that aim to reuse templates, styles, and logic.

Introduction to the WebComponent

WebComponent consists of three technologies:

  1. Custom elements
  2. The shadow of the DOM
  3. HTML template

Custom elements and shadow DOM, both of which provide a set of JavaScript for creating elements and DOM. HTML templates add templates and slots accordingly.

When the story starts with slot, the concrete webComponent is created:

Create a component template:

<template id="my-app">
  <! - content - >
  <p>My paragraph</p>
  <! Add slot with name -->
  <slot name="left"></slot>
  <slot name="right"></slot>

  <! -- Add style -->
  <style>
    p {
      color: red;
      font-size: 20px;
    }
  </style>
</template>
Copy the code
<my-app>
  <span slot="left">I`m left!</span>
  <span slot="right">I`m right!</span>
</my-app>
Copy the code

Note: slots are an important part of componentization because slots increase the flexibility of components.

My-app is a custom component whose content is a slot.

We will create content that is attached to the DOM via JS:

// Get the template with id
const template = document.getElementById("#my-app");
const tplContent = template.content;

document.body.appendChild(tplContent);
Copy the code

Create components using webCompnent-related apis:

  • Use the template
  • Use the shadow – dom
customElements.define(
  "my-app".class extends HTMLElement {
    constructor() {
      super(a);let tpl = document.getElementById("#my-app");
      let tplContent = tpl.content;

      const shadowRoot = this.attachShadow({ mode: "open" }).appendChild(
        templateContent.cloneNode(true)); }});Copy the code

We see that the second argument to define is a class that inherits HTMLElement, gets the tplContent in the class constructor and clones the template content to the root of the shadow using the cloneNode method.

React “Props slot”

We can initialize a project using familiar scaffolding:

  • Gatsby is a GraphQL data scaffolding tool. If you’re interested in GraphQL, try it out.
  • CreateReactApp is the official React scaffolding
  • There are other umiJS, NextJS, and other excellent scaffolding to quickly start a React project

Important features of React: All React components must act like “pure functions” to protect their props from being changed.

The PropTypes package can be used to verify the possible types of Props.

import PropTypes from "prop-types";
Copy the code

React 15.5 contains a package of prop-types. React does not have props type verification built in.

Type validation In Flow/TypeScript, the Flow/TypeScript strong type can be used for validation.

  • PropTypes. Array Array type

  • PropTypes. Bool Indicates the Boolean type

  • PropTypes. Func Function type, possibly function component

  • Proptypes. number Specifies the value type

  • PropTypes. Object Object Type This object type may be our JSX

  • PropTypes. String string

  • PropTypes. Symbol Symbol type

  • Proptypes.node node: Any element that can be rendered (including numbers, strings, elements, or arrays)

  • PropTypes. Element A React element

  • PropTypes. ElementType a React elementType

  • Proptypes.instanceof (Message) instance property

  • Proptypes.oneof ([‘a’, ‘b’]) specifies a value

  • Proptypes.oneoftype ([proptypes.string, proptypes.number, proptypes.instanceof (Message)]) specifies the type

  • PropTypes. ArrayOf (PropTypes. Number) The number type of an array member

  • Proptypes.objectof (proptypes.number) The member type of the object

  • Proptypes.shape ({color: proptypes.string, fontSize: proptypes.number}) Specifies a numeric type

  • Proptypes. exact({name: proptypes. string, quantity: proptypes. number}) Additional type warnings

  • PropTypes. Func. IsRequired necessity

  • Proptypes.any. isRequired Any type required

  • .

We saw that the props support types are rich, but functions, elements, and components, which means we can pass JSX functions as slots:

We use Gatsby to create a project, create

  • page: slot
  • component: MySlot
// page: slot.jsx
import React from "react";

// components
import MySlot from ".. /components/slot";

const slot = props= > {
  return (
    <div>
      <MySlot
        left={<div>We are the left of slot</div>}
        right={<div>We are the right people for slot</div>}
      >
        <div>I'm children content 1</div>
        <div>I'm children content 2</div>
        <div>I'm children content 3</div>
      </MySlot>
    </div>
  );
};

export default slot;
Copy the code
// component: MySlot.jsx
import React from "react";

const MySlot = props= > {
  // Structure props, get "slot"
  const { left, right, children } = props;

  return (
    <div style={{ color: "#fff}} ">
      <div style={{ backgroundColor: "blue}} ">left --- {left && left}</div>
      <br />
      <div style={{ backgroundColor: "red}} ">right --- {right && right}</div>
      <br />
      <div style={{ backgroundColor: "yellow", color: "#000}} ">
        children --- {children && children}
      </div>
    </div>
  );
};

export default MySlot;
Copy the code

We will MySlot by props. Left/props. Right/props. The children pass three named “slots”, at the time of use, do not need special slot elements in the React + name attribute, Instead, access the JSX content directly through props, or the React component.

Vue

If you looked at React Props delivering flexibility, you might be wondering if Vue Props were as flexible as that, since one Props handles almost all problems with components that are passed in externally.

Data types Vue supports:

  • String
  • Number
  • Boolean
  • Array
  • Object
  • Date
  • Function
  • Symbol

Although functions can be passed as prop in Vue, it is considered an anti-pattern. Functions are generally not used as props. Instead, data is passed in the form of events that the component listens for.

In Vue, props basically doesn’t use functions, and while it’s runnable, the event system in Vue seems better suited for handling parent-child component data passing.

Vue supports the following development modes:

  • Template development pattern
  • JSX development mode
  • Render function development mode

Render generates createElement as VNode after VNode, but we don’t want to use props to pass in VNode. So the way Vue uses Props to pass components, elements, is not natural in Vue.

Vue slot design is a reference to webComponent slot design. But the Vue slot system is more flexible.

  • slot
  • Scope slot

In version 2.6.0, the instruction V-slot was unified to unify the writing method of the instruction

The default slot

<nuxt-link url='/profile'>
  <span>Attaches great importance to education</span>
</nuxt-link>
Copy the code

Value education is the default slot

<! -- nuxt-link --> <template> <div> <slot /> </div> </template>Copy the code

Render the default slot content using the render function:

Access the default value of the $slots attribute for the VM instance

export default {
  render(h) {
    return this.$slots.default; }};Copy the code

Named slot

<nuxt-link url="/profile">
  <template v-slot:left>
    <span>I'm left with the contents of the slot</span>
  </template>
  <template v-slot:default>
    <span>Default slot content</span>
  </template>
  <template v-slot:right>
    <p>I am right of the slot content</p>
  </template>
</nuxt-link>
Copy the code

nuxt-link

<template>
  <div class="container">
    <header>
      <slot name="left"></slot>
    </header>
    <main>
      <slot></slot>
    </main>
    <footer>
      <slot name="right"></slot>
    </footer>
  </div>
</template>
Copy the code

Rendering features of slot data in VUE

The first thing to be clear about is that the parent component only manages the data of the parent component and the child component only manages the data of the child component

Everything in the parent template is compiled in the parent scope; Everything in a subtemplate is compiled in a subscope.

<template>
  <app-link url="/profile">
    Logged in as {{ user.name }}
  </a-link>
</template>

<script>
  export default {
    data() {
      return {
        user: {
          name: 'magnesium-'}}}}</script>
Copy the code

Logged in as {{user.name}} rendered the magnesium- of the parent component rather than the user.name attribute in the app-Link component.

Scope slot

What problem does a scope slot solve? Vue slots data in the parent component that needs to be retrieved from the child component. But our Vue parent component data is separate. So Vue provides scope slots for data transfer.

current-user>
  <template v-slot:default="slotProps">
    {{ slotProps.user.firstName }}
  </template>
</current-user>
Copy the code

The main contents of slots in Vue are:

  • The default slot
  • A named slot
  • Scope slot
  • Slot instruction

Presents in the slot

Presents projection ng – content

Similar to Vue slots, they are distinguished by name

<app-parent>
  <app-child class="red"></app-child>
  <app-child name="child"></app-child>
</app-parent>
<div style="background: cyan">
  <ng-content select="[name=child]"></ng-content>
</div>
<div style="background: pink">
  <ng-content select=".red"></ng-content>
</div>
Copy the code

Decoration match: @contentChild

Presents the template ng – the template

The ng-template template is not used and will not actually be rendered as HTML

Match decorator: @viewChild

TemplateRef

React/Vue is similar to how ref references dom element nodes.

ng-container

Svelte

Svelte slot contents:

  1. The default slot
<div class="box">
  <slot>
    <span style="color: 'red'">There's nothing in this slot</span>
  </slot>
</div>
Copy the code
<script>
	import App from './App.svelte';
</script>

<App>
	<h2>Hello,</h2>
	<p>World!</p>
</App>
Copy the code
  1. Slot return mechanism

Generally used to indicate an empty slot without inserting anything into the slot component

  1. Named slot

Scope slots similar to Vue and WebComponent

  1. Slot data is transmitted through prop

Slot data in Svelte is passed through props. All functions in Svelte need to be declared.

<div>
  <slot isGood="{isGood}"></slot>
</div>
Copy the code
<script>
  import App from "./App.svelte";
</script>

<App let:isGood={isGood}>
	<div>
		{#if isGood}
			<p>I am being hovered upon.</p>
		{:else}
			<p>Hover over me!</p>
		{/if}
	</div>
</App>
Copy the code

reference

  1. Web Components are a different set of technologies that allow you to create reusable custom elements whose functionality is encapsulated outside of your code and use them in your Web applications.
  2. Components allow you to break up the UI into separate reusable pieces of code and think about each piece individually. The purpose of this guide is to introduce the concepts of components.

todo

  • Better examples to add