Emplacement de distribution de contenu Vue-js tutoriel-php.cn

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>

Copier après la connexion

　　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>

Copier après la connexion

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
    }
  }
})

Copier après la connexion

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
  },
};

Copier après la connexion

<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>

Copier après la connexion

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>
  `,
};

Copier après la connexion

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

Copier après la connexion

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>
  `,
};

Copier après la connexion

【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
  },
};

Copier après la connexion

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
  },
};

Copier après la connexion

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>
  `,
};

Copier après la connexion

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

Copier après la connexion

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>
  `,
};

Copier après la connexion

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
  },
};

Copier après la connexion

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>
  `,
};

Copier après la connexion

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
  },
};

Copier après la connexion

作用域插槽

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

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

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

Copier après la connexion

　　在父级中，具有特殊属性 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
  },
};

Copier après la connexion

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

【列表组件】

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

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段'},
      ]
    }
  }
};

Copier après la connexion

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

Copier après la connexion

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!