web-dev-qa-db-fra.com

Comment passer des accessoires en utilisant des emplacements du parent à l'enfant -vuejs

J'ai un composant parent et un composant enfant.

Le modèle du composant parent utilise un emplacement afin qu'un ou plusieurs composants enfants puissent être contenus à l'intérieur du parent.

Le composant enfant contient un accessoire appelé "signal".

J'aimerais pouvoir modifier les données appelées "parentVal" dans le composant parent afin que l'accessoire de signal des enfants soit mis à jour avec la valeur du parent.

Cela semble être quelque chose de simple, mais je ne peux pas comprendre comment le faire en utilisant les emplacements: Voici un exemple en cours d'exécution ci-dessous:

const MyParent = Vue.component('my-parent', {
  template: `<div>
               <h3>Parent's Children:</h3>
               <slot :signal="parentVal"></slot>
             </div>`,

  data: function() {
    return {
      parentVal: 'value of parent'
    }
  }
});

const MyChild = Vue.component('my-child', {
  template: '<h3>Showing child {{signal}}</h3>',
  props: ['signal']
});

new Vue({
  el: '#app',
  components: {
    MyParent,
    MyChild
  }
})
<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app">
  <my-parent>
    <my-child></my-child>
    <my-child></my-child>
  </my-parent>
</div>
vue.jsvuejs2vue-component
13
Kunle

Vous devez utiliser un emplacement délimité . Vous y étiez presque, je viens d'ajouter le modèle qui crée la portée.

  <my-parent>
    <template slot-scope="{signal}">
      <my-child :signal="signal"></my-child>
      <my-child :signal="signal"></my-child>
    </template>
  </my-parent>

Voici votre code mis à jour.

const MyParent = Vue.component('my-parent', {
  template: `<div>
               <h3>Parent's Children:</h3>
               <slot :signal="parentVal"></slot>
             </div>`,

  data: function() {
    return {
      parentVal: 'value of parent'
    }
  }
});


const MyChild = Vue.component('my-child', {
  template: '<h3>Showing child {{signal}}</h3>',
  props: ['signal']
});

new Vue({
  el: '#app',
  components: {
    MyParent,
    MyChild
  }
})
<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app">
  <my-parent>
    <template slot-scope="{signal}">
      <my-child :signal="signal"></my-child>
      <my-child :signal="signal"></my-child>
    </template>
  </my-parent>
</div>

La version de Vue 2.6 introduit une directive unifiée v-slot Qui peut être utilisée pour les emplacements normaux ou étendus. Dans ce cas, puisque vous utilisez l'emplacement par défaut sans nom, la propriété signal est accessible via v-slot="{ signal }":

  <my-parent>
    <template v-slot="{ signal }">
      <my-child :signal="signal"></my-child>
      <my-child :signal="signal"></my-child>
    </template>
  </my-parent>
17
Bert