Vue Slots Components Combination / Distribution Instance

Use Slots Distribution Content

When using components, there is a case where components are used in combination, as follows:

       If the component is used, the parent component will use the child assembly. Overlay, the effect of the demand can not be achieved, in order to achieve this effect, it is necessary to use Slots to distribute   
Slots is as follows:

Vue.component ( 'app', {template: '\ \ This \
111 \ 222
\ 333 \
  • \ ',}) VAR App = NEW Vue ({EL: '# app': {template: '
  • Hello Word
  • },' child2 ': {template:'
  • Hello Vue JS
  • ' }}})
  • The tag is displayed as shown in Figure 1 when the tag is not introduced into other components. When the component is shown as shown in Figure 2
    , it can be measured to introduce a plurality of side-by-column components, and the components will be displayed in turn
    , but this can only solve the singleThe introduction of components, the components of multiple applications are required in practical applications, in order to solve this problem, to determine the uniqueness of the SLOT location to determine the Slot’s Vue can add line Name to identify,

    vue slots 组件的组合/分发实例 Need to note:

    Slot add line in the same parent level must guarantee unique;

    Slot under subcomponents is the slot name of the parent component Repeat, and each level is relatively independent.

    The code effect is as follows:

    How to use slot?

    Vue.component (‘app’, {template: ‘\ \

    did not show this
    \ 111
     \  222  \ 
    No, this \ 333 \
    \ ',}) var app = new Vue ({EL: '#App': {Template: '
    Hello Word \ 22222
    \ '}, 'child2': {Template: ' Hello Vue JS
  • The combination of Vue Slots components above is a small package sharing Give everyone allThe content, I hope I can give you a reference, I also hope that you will support Tumi Clouds.
    © Copyright Notice
    Just support it if you like
    comment Grab the couch

    Please log in to comment