Vue2.6 + nouvelle syntaxe de slot

Il existe trois types de machines à sous

• 1. Emplacement anonyme (également appelé emplacement par défaut): il n'y a pas de nom, il n'y en a qu'un
• 2. Emplacement nommé: étiquette d'emplacement de composant d'emplacement relativement anonyme nommée avec un nom
• 3. Scope slot: les données du composant enfant peuvent être obtenues par la page parent (résolu que les données ne peuvent être transmises que de la page parent au composant enfant)
• L'ancienne façon d'écrire la machine à sous a été sur la voie de la désuétude

Emplacement anonyme

Aller directement à la
page de code parent

<div id="father">
  <h1>爹</h1>
  <son>
    <template v-slot:default>
      <p>我会插所有没有名字的插槽</p>
    </template>
  </son>
</div>

Sous-page

<template id="son">
  <div>
    <h1>儿子</h1>
    <slot></slot>
  </div>
</template>

Jetez un œil à l'effet de page

Emplacement nommé

  <div id="father">
    <h1>爹</h1>
    <son>
      <template v-slot:bottom>
        <p>我是下面的白熊</p>
      </template>
      <template v-slot:top>
        <p>我是上面的棕熊</p>
      </template>
      <template v-slot:center>
        <p>我是中间的熊猫</p>
      </template>
    </son>
  </div>

<template id="son">
  <div>
    <h1>儿子</h1>
    <slot name='top'></slot>
    <slot name='center'></slot>
    <slot name='bottom'></slot>
  </div>
</template>

• Sucre syntaxique

<div id="father">
  <h1>{
   
   { name }}</h1>
  <son>
    <template #bottom>
      <p>我是下面的白熊</p>
    </template>
    <template #top>
      <p>我是上面的棕熊</p>
    </template>
    <template #center>
      <p>我是中间的熊猫</p>
    </template>
  </son>
</div>

Dénomination dynamique des emplacements

• grammaire

<template v-slot:{动态插槽名}>
  //。。。内容
</template>

Emplacement pour lunette

Page parente

<div id='father'>
  <h1>爹</h1>
  <son>
    <template #child='sonData'>
      {
   
   { sonData.onedata.name }}
    </template>
  </son>
</div>

• #enfantRéellementv-slot: enfantSucre syntaxique
• enfantFente vers et sous-composantNomAttributs cohérents
• sonDataOuiSous-ensembleTout est passéCollecte de données
• .onedataEst-il prêt à transmettre des données sur le sous-composantPersonnaliserun desPrénom
• .NomOuionedataUn attribut dans

Sous-page

<template id='son'>
  <div>
    <h1>儿子</h1>
    <slot name='child' :onedata='one' :twodata='two'></slot>
  </div>
</template>

• onedata = 'un' dansonedataEst pour l'attribut passéNom d'usage
• uneEst dans le sous-composantNom des données
• Peut utiliserLierManièreDonnées multiples, Par exemple: twodata = 'two'

code js

const son = {
    
    
  template: '#son',
  data() {
    
    
    return {
    
    
      one: {
    
    
        name: '蝎子',
        age: '莱莱'
      },
      two:[1,23,435,5876]
    }
  }
}

const father = new Vue({
    
    
  el: '#father',
  components: {
    
     son }
})

Jetez un œil à l'effet de l'impression sur la page

La page parent peut également être écrite comme ceci (déconstruire l'emplacement)

<div id='father'>
  <h1>爹</h1>
  <son>
    <template #child='{ onedata,twodata }'>
      {
   
   { onedata.name }}
    </template>
  </son>
</div>

Ceci est dû au fait

• Le principe de fonctionnement interne des slots scoped est d'inclure le contenu de votre slot dans une fonction qui passe dans un seul paramètre:

function (sonData) {
    
    
  // 插槽内容
}

(sonData) => Le paramètre peut être remplacé par la valeur existante ((onedata, twodata)) sur la balise slot