preface

While walking around Denver today, I saw an article about how Vue delivers Slot across components

Thinking about

As we all know, component transfer in Vue is usually done using slots, but in some cases it can be very uncomfortable to cross N layers of parent-child relationships

React can pass components directly through props

function SplitPane(props) {
  return (
    <div className="SplitPane">
      <div className="SplitPane-left">{props.left}</div>
      <div className="SplitPane-right">{props.right}</div>
    </div>
  );
}
function App() {
  return <SplitPane left={<Contacts />} right={<Chat />} / >;
}
Copy the code

In most cases, slot is superior, but should React be used in Vue?

The answer is yes, the Component and the IS property

introduce

Component renders a “meta-component” as a dynamic component. Determines which component is rendered based on the value of is

Which is of type string | ComponentDefinition | ComponentConstructor

So we just use

<template lang="pug"> div component(:is="Component1") component(:is="Component2") </template> <script> import Component1  from "./Component1.vue"; // Component2 import Component2 from "./ component2.vue "; Export default {data() {return {Component1, Component2}; }}; </script>Copy the code

They can render directly in the instance;

From this, we can pass components to child components through prop provide/inject or other means

// Parent template Child(:my-slot="Component2") // Child <template lang="pug"> Component (:is="mySlot") </template> <script> export default { props: ["mySlot"], }; </script>Copy the code

Emmm: React…

conclusion

It’s over. It’s time for sudden death again