vue solt content distribution / encapsulation of vue general components

1: The transfer of props data, the triggering of event events and the distribution of solt content constitute the three API sources of vue components, and any complex components are composed of these three parts

2: Vue is divided into three parts through the packaging of components (decoupling and style reuse for reusable components):

①props: For decoupling, data is passed in from the parent component, the child component itself does not generate data, even if it is generated, it is only used inside the component

②event: Process events in the parent component, such as clcik events, the logic is placed in the parent component, the child component is only carried, in the child component use emit to trigger the event in the parent component

③solt: When multiple components need to be combined and used to mix the content of the parent component and the template of the child component, solt is used, that is, content distribution.

④ Unified management style sheet

For example: the encapsulation of multiple buttons with basically the same style, the result is as follows

The code of the parent component is as follows. The parent component passes the value to the child component. Content distribution is to put the content of the parent component to the location specified by the child component.

<template>

  <div id="app">

    <aButton> Portrait </ aButton>

    <aButton type="primary">按钮</aButton>

    <aButton> Portrait </ aButton>

    <aButton type="danger">按钮</aButton>

    <aButton> Portrait </ aButton>

  </div>

</template>

In subcomponents, use the <solt> </ solt> element as an outlet for distribution of content within the bearer