web-dev-qa-db-fra.com

Éléments/éléments de vue.js imbriqués

Cela peut sembler une vraie question de noob, mais je suis plutôt nouveau dans MVVM ... ou même dans MVC dans JS, donc désolé par avance.

Je joue avec vue.js et j'aime la simplicité jusqu'à présent. Mais pour ce que j'essaie de faire, je pense que je dois procéder de manière différente.

Je veux imbriquer les instances/éléments Vue les uns dans les autres, mais bien entendu, le parent utilisera ensuite l'enfant lorsqu'il lit dans le DOM lors de l'init.

Par souci d'argumentation, voici un exemple de ce que je veux dire. Je ne fais rien du genre, mais c'est le moyen le plus simple de donner un exemple de ce que je veux dire:

<body>
    {{ message }}
    <div id="another">
        {{ message }}
    </div>
</body>

Alors mon JS par exemple serait:

new Vue({
    el: "body",
    data: {
        message: "I'm the parent"
    }
});

new Vue({
    el: "#another",
    data: {
        message: "I'm the child"
    }
});

Le résultat serait:

<body>
    I'm the parent
    <div id="another">
        I'm the parent
    </div>
</body>

Maintenant, je comprends tout à fait pourquoi il fait cela et en fait, il devrait le faire, mais mon exemple tente simplement d’illustrer comment je ferais une chose pareille?

Dans mon projet réel, j'ai un v-class sur mon corps qui change lorsque quelque chose se passe dans le corps (à de nombreux endroits), mais bien sûr, mon corps voudra aussi d'autres exemples de vues qui font d'autres trucs.

comment pourrais-je faire pour nidifier? Y a-t-il une fonctionnalité en vue pour régler ce problème? Dois-je gérer des composants? Ou peut-être chercher le corps dans un élément enfant (par exemple, comme le ferait jQuery avec $ ("body")), puis le manipuler dans l'instance de Vue?

J'espère que cette question n'est pas trop stupide et que quelqu'un peut me diriger dans la bonne direction.

Merci

javascriptmvvmvue.js
16
keogh

Pensez aux composants. http://vuejs.org/guide/components.html

Créez une instance de Vue sur le corps, comme précédemment, mais tout ce qui est imbriqué est un composant. Passer des données via des accessoires.

7
Fergal

La transmission de données via des accessoires n'est qu'un moyen de le faire. L'imbrication de composants et l'héritage du parent fonctionnent également très bien.

Exemple: http://jsfiddle.net/hajkrupo/3/

<encapsulated-component inline-template>
    <header>
        <cart-status></cart-status>
    </header>
    <cart></cart>
</encapsulated-component>
5
swift

Vous pouvez le faire avec les tags <slot>. Voici un exemple.

1.Alors, vous devez d'abord créer un composant de présentation de base, comme celui-ci. Vous devez ajouter la balise <slot> où vous voulez. Très important, pensez à l’attribut name de la balise <slot>.

var basicLayout = Vue.component("basic-layout", {
    template: `

    <div class="basic-layout">
        <header>
            <slot name="header"></slot>
        </header>
        <main>
            <slot></slot>
        </main>
        <footer>
            <slot name="footer"></slot>
        </footer>
    </div>

    `
});

2.Puis créez votre composant personnalisé. J'ai créé le composant myHeader pour vous montrer comment il fonctionne.

var myHeader = Vue.component("my-header", {
    template: `

    <div class="header">
        <ul>
            <li>HOME</li>
            <li>ABOUT</li>
            <li>CONTACT</li>
        </ul>
    </div>

   `
});

3.Placez cet exemple de code dans votre fichier HTML. Pour placer du contenu dans l'emplacement actuel, utilisez simplement l'attribut slot dans votre composant ou votre balise.

<div class="app">
  <basic-layout>
      <my-header slot="header"></my-header>

      <p>Content in &lt;main&gt; tag</p>

      <p slot="footer">Content in footer</p>
  </basic-layout>
</div>

4.Le résultat sera comme ceci:

<div class="app">
    <div class="basic-layout">
        <header>
            <div class="header">
              <ul>
                <li>HOME</li>
                <li>ABOUT</li>
                <li>CONTACT</li>
              </ul>
            </div>
        </header>

        <main>
        <p>Content in &lt;main&gt; tag</p>
        <main>

        <footer>
            <p>Content in footer</p>
        </footer>
    </div>
</div>

Veuillez consulter la documentation de la page officielle de Vue.js Cliquez simplement sur le lien ici pour plus d’informations.

Voici un exemple dans jsfiddle

1
riverside256