Emplacement de distribution de contenu Vue

Mots précédents

Pour que les composants soient composés, il faut un moyen de mélanger le contenu du composant parent avec le propre modèle du composant enfant. Ce processus est appelé Distribution de contenu (ou « transclusion »). Vue implémente une API de distribution de contenu qui suit le projet actuel de spécification de composant Web, en utilisant des éléments <slot> spéciaux comme emplacements pour le contenu brut. Cet article présentera en détail l'emplacement de distribution de contenu Vue

Portée de la compilation

Avant d'approfondir l'API de distribution de contenu, clarifiez d'abord dans quelle portée le contenu est compilé. En supposant que le modèle soit

<child-component>
  {{ message }}
</child-component>

　　message doit-il être lié aux données du composant parent ou aux données du composant enfant ? La réponse réside dans les composants parents. La portée du composant signifie simplement : le contenu du modèle de composant parent est compilé dans la portée du composant parent ; le contenu du modèle de composant enfant est compilé dans la portée du composant enfant.

Une erreur courante consiste à essayer de lier une directive à la propriété/méthode d'un composant enfant dans le modèle de composant parent :

<!-- 无效 -->
<child-component v-show="someChildProperty"></child-component>

En supposant que someChildProperty est une propriété d'un composant enfant, l'exemple ci-dessus ne fonctionnera pas comme prévu. Le modèle du composant parent ne doit pas connaître l'état du composant enfant

Si vous souhaitez lier une directive de portée au nœud racine d'un composant, vous devez le faire sur le propre modèle du composant :

Vue.component('child-component', {
  // 有效，因为是在正确的作用域内
  template: '<p v-show="someChildProperty">Child</p>',
  data: function () {
    return {
      someChildProperty: true
    }
  }
})

De même, le contenu distribué est compilé dans le périmètre parent

Rejeté par défaut

Généralement, si le modèle de composant enfant ne contient pas <slot> socket, le contenu du composant parent sera supprimé

var parentNode = {
  template: `  <p class="parent">
    <p>父组件</p>
    <child>
      <p>测试内容</p>
    </child>
  </p>
  `,
  components: {
    'child': childNode
  },
};

<p id="example">
  <parent></parent></p><script src="https://unpkg.com/vue"></script><script>var childNode = {
  template: `  <p class="child">
    <p>子组件</p>
  </p>  `,
};var parentNode = {
  template: `  <p class="parent">
    <p>父组件</p>
    <child>
      <p>测试内容</p>
    </child>
  </p>  `,
  components: {    'child': childNode
  },
};// 创建根实例new Vue({
  el: '#example',
  components: {    'parent': parentNode
  }
})</script>

Comme le montre la figure ci-dessous, le

contenu du test

contenu dans >

Emplacement anonyme

Lorsque le modèle de composant enfant n'a qu'un seul emplacement sans attributs, l'intégralité du fragment de contenu du composant parent sera inséré dans l'emplacement DOM où se trouve l'emplacement , et la balise de slot elle-même sera remplacée

var childNode = {
  template: `  <p class="child">
    <p>子组件</p>
    <slot></slot>
  </p>
  `,
};

var parentNode = {
  template: `  <p class="parent">
    <p>父组件</p>
    <child>
      <p>测试内容</p>
    </child>
  </p>
  `,
  components: {
    'child': childNode
  },
};

S'il y a plus d'un emplacement anonyme, vue signalera une erreur

var childNode = {
  template: `  <p class="child">
    <p>子组件</p>
    <slot></slot>
    <slot></slot>
  </p>
  `,
};

【Par défaut 】

Tout ce qui se trouve initialement dans la balise

est considéré comme un

contenu de secours

, ou des valeurs par défaut. Le contenu de secours est compilé dans la portée du composant enfant et n'est affiché que lorsque l'élément hôte est vide et qu'il n'y a aucun contenu à insérer

<slot> Lorsque l'emplacement a une valeur par défaut et que l'élément parent est dans < ;child> Lorsqu'il n'y a aucun contenu à insérer, la valeur par défaut

var childNode = {
  template: `  <p class="child">
    <p>子组件</p>
    <slot><p>我是默认值</p></slot>
  </p>
  `,
};
var parentNode = {
  template: `  <p class="parent">
    <p>父组件</p>
    <child></child>
  </p>
  `,
  components: {
    'child': childNode
  },
};

s'affiche lorsque l'emplacement a une valeur par défaut et l'élément parent est dans Lorsqu'il y a du contenu à insérer dans , la valeur de paramètre

var childNode = {
  template: `  <p class="child">
    <p>子组件</p>
    <slot><p>我是默认值</p></slot>
  </p>
  `,
};
var parentNode = {
  template: `  <p class="parent">
    <p>父组件</p>
    <child>
      <p>我是设置值</p>
    </child>
  </p>
  `,
  components: {
    'child': childNode
  },
};

Named Slot

peut utiliser un attribut spécial

pour configurer la manière dont le contenu est distribué. Plusieurs emplacements peuvent avoir des noms différents. L'emplacement nommé correspondra aux éléments du fragment de contenu qui ont l'attribut

correspondant

　　<slot>nameslot

var childNode = {
  template: `  <p class="child">
    <p>子组件</p>
    <slot name="my-header">头部默认值</slot>
    <slot name="my-body">主体默认值</slot>
    <slot name="my-footer">尾部默认值</slot>
  </p>
  `,
};

var parentNode = {
  template: `  <p class="parent">
    <p>父组件</p>
    <child>
      <p slot="my-header">我是头部</p>
      <p slot="my-footer">我是尾部</p>
    </child>
  </p>
  `,
  components: {
    'child': childNode
  },
};

Il peut toujours y avoir un emplacement anonyme, qui est le

emplacement par défaut

, comme emplacement de secours si aucun élément de contenu correspondant n'est trouvé. Les emplacements anonymes ne peuvent être utilisés que comme emplacements pour les éléments sans attributs d'emplacement. Si les emplacements ne sont pas configurés pour les éléments avec des attributs d'emplacement, ils seront ignorés

.

var childNode = {
  template: `  <p class="child">
    <p>子组件</p>
    <slot name="my-body">主体默认值</slot>
    <slot></slot>
  </p>
  `,
};

　

Insérer dans,

Je suis un autre contenu< ; /p> est inséré dans <slot>, et

est supprimé

var parentNode = {
  template: `  <p class="parent">
    <p>父组件</p>
    <child>
      <p slot="my-body">我是主体</p>
      <p>我是其他内容</p>
      <p slot="my-footer">我是尾部</p>
    </child>
  </p>
  `,
  components: {
    'child': childNode
  },
};

S'il n'y a pas d'emplacement par défaut, ceux-ci ne peuvent pas être trouvé Des fragments de contenu qui correspondent à

var childNode = {
  template: `  <p class="child">
    <p>子组件</p>
    <slot name="my-body">主体默认值</slot>
  </p>
  `,
};

　

i Autre contenu< /p> et

sont abandonnés

var parentNode = {
  template: `  <p class="parent">
    <p>父组件</p>
    <child>
      <p slot="my-body">我是主体</p>
      <p>我是其他内容</p>
      <p slot="my-footer">我是尾部</p>
    </child>
  </p>
  `,
  components: {
    'child': childNode
  },
};

作用域插槽

　　作用域插槽是一种特殊类型的插槽，用作使用一个 (能够传递数据到) 可重用模板替换已渲染元素。

　　在子组件中，只需将数据传递到插槽，就像将 props 传递给组件一样

<p class="child">
  <slot text="hello from child"></slot></p>

　　在父级中，具有特殊属性 scope 的 <template> 元素必须存在，表示它是作用域插槽的模板。scope 的值对应一个临时变量名，此变量接收从子组件中传递的 props 对象

var childNode = {
  template: `  <p class="child">
    <p>子组件</p>
      <slot xxx="hello from child"></slot>
  </p>
  `,
};
var parentNode = {
  template: `  <p class="parent">
    <p>父组件</p>
    <child>
      <template scope="props">
        <p>hello from parent</p>
        <p>{{ props.xxx }}</p>
      </template>
    </child>
  </p>
  `,
  components: {
    'child': childNode
  },
};

　　如果渲染以上结果，得到的输出是

【列表组件】

　　作用域插槽更具代表性的用例是列表组件，允许组件自定义应该如何渲染列表每一项

var childNode = {
  template: `  <ul>
    <slot name="item" v-for="item in items" :text="item.text">默认值</slot>
  </ul>
  `,
  data(){
    return{
      items:[
        {id:1,text:'第1段'},
        {id:2,text:'第2段'},
        {id:3,text:'第3段'},
      ]
    }
  }
};

var parentNode = {
  template: `  <p class="parent">
    <p>父组件</p>
    <child>
      <template slot="item" scope="props">
        <li>{{ props.text }}</li>
      </template>
    </child>
  </p>
  `,
  components: {
    'child': childNode
  },
};

 

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!