Maison > Article > interface Web > Comment afficher la livraison du composant parent dans l'emplacement vue dans le composant enfant

Comment afficher la livraison du composant parent dans l'emplacement vue dans le composant enfant

php中世界最好的语言original: 2018-04-12 14:09:012267parcourir

Cette fois, je vais vous présenter Comment vue slot affiche la livraison des composants parents dans les composants enfants, quelles sont les précautions à prendre pour que vue slot affiche la livraison des composants parents dans les composants enfants, comme suit C'est un cas pratique, jetons-y un coup d'œil.

Le composant parent n'utilise aucun attribut slot spécifié, et la valeur par défaut est default

Vous pouvez utiliser la valeur par défaut dans le slot. Si le composant parent ne passe pas le slot correspondant, la valeur par défaut sera affichée

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="vue.js" charset="utf-8"></script>
</head>
<body>
  <p id="app">
    <modal>
      <!-- 调用父组件的方法 -->
      <h1 @click=&#39;click&#39;>aaa</h1></modal>
    <modal>
      <h2>bbb</h2></modal>
    <modal>
      <!-- 使用slot设置模板中的名字,会插入到指定的slot中 -->
      <p slot=&#39;title&#39;>hello</p>
      <p slot=&#39;content&#39;>
        world
      </p>
    </modal>
    <modal></modal>
  </p>
  <template id="modal">
    <!-- 使用slot在子组件中显示父组件传过来的模板 -->
      <p>
        modal
        <slot name=&#39;default&#39;>如果没有会使用这个默认值</slot>
      <h1>
        title:
        <slot name=&#39;title&#39;>
        </slot>
      </h1>
      content:
      <slot name=&#39;content&#39;></slot>
      </p>
    </template>
  <script type="text/javascript">
    let modal = {
      template: '#modal'
    }
    new Vue({
      el: '#app',
      components: {
        // es 简写 ，只写一个的意思为
        // modal:modal
        modal
      },
      methods: {
        click() {
          console.log('aaa')
        }
      }
    })
  </script>
</body>
</html>

Je crois qu'après avoir lu le cas dans cet article, vous maîtrisez la méthode. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois php !

Lecture recommandée :

ul de Vue.js Comment la balise -li imite-t-elle la balise select

graphique de données attribué dynamiquement ajax

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：diagramme de données d'affectation dynamique ajaxArticle suivant：diagramme de données d'affectation dynamique ajax

Articles Liés

Voir plus