Obtenir des données à partir d'une Vue unique composant dans un autre composant?

- Je utiliser Vue.js 2.5.13 et ont cette structure:

composant un.vue:

<template>
  <div>
    <input type="text" v-model="input_one">
    <component-two></component-two>
  </div>
</template>

<script>
  import ComponentTwo from 'component-two.vue'

  export default {
    name: "component-one",
    components: {
      ComponentTwo
    },
    data() {
      return {
        input_one: 'Hello from ComponentOne',
        input_two: ... //<-- I want to get value from ComponentTwo input_two (v-model) here
      }
    }
  }
</script>

composant-deux.vue:

<template>
  <div>
    <input type="text" v-model="input_two">
  </div>
</template>

<script>
  export default {
    name: "component-two",
    data() {
      return {
        input_one: 'Hello from ComponentTwo'
      }
    }
  }
</script>

Comment obtenir des données à partir de ComponentTwo en composant ComponentOne? C'est important pour moi, parce que j'ai beaucoup de composants semblables avec des champs (énorme d'inscription formulaire du site) et n'ont aucune idée à propos de l'appel de données entre la Vue-des composants..

Double Possible de Partager des données entre les différents composants dans Vuejs
Je ne pense pas que je serais de référence que l'un comme un double possible depuis que la réponse propose d'utiliser le .sync modificateur qui a été retiré de vue. Mais, pour sûr, il ya beaucoup d'autres questions que fournisseur de réponses à cette situation.

InformationsquelleAutor Vic Shóstak | 2018-01-29

7

Vous pouvez facilement réaliser cela à l'aide d'un événement mondial de bus.

https://alligator.io/vuejs/global-event-bus/

Pour les plus grands, des applications plus complexes, je vous conseille d'utiliser un état de l'outil de gestion tels que vuex.

https://vuex.vuejs.org/en/

InformationsquelleAutor

Vous pouvez utiliser .synchronisation Modificateur

<template>
  <div>
    <input type="text" v-model="input_one">
    <component-two :secondValue.sync="input_two"></component-two>
  </div>
</template>

<script>
  import ComponentTwo from 'component-two.vue'

  export default {
    name: "component-one",
    components: {
      ComponentTwo
    },
    data() {
      return {
        input_one: 'Hello from ComponentOne',
        input_two: ''
      }
    }
  }
</script>

composant-deux.vue:

<template>
  <div>
    <input type="text" v-model="input_two">
  </div>
</template>

<script>
  export default {
    name: "component-two",
    data() {
      return {
        input_one: 'Hello from ComponentTwo',
        input_two: ''
      },
      watch: {
        input_two : function(val){
          this.$emit('update:secondValue', val)
        }
      }
    }
  }
</script>

InformationsquelleAutor El Danielo

Vous avez besoin pour mettre en œuvre un système qui envoyer le v-modèle à la maison mère.

Cela peut être fait en utilisant une propriété calculée à l'intérieur de component-two qui émet le changement à l'intérieur de sa méthode de jeu.

Exemple:

JS:

Vue.component('component-two', {
  name: 'component-two',
  template: '#component-two-template',
  props: {
    value: {
      required: true,
      type: String,
    },
  },
  computed: {
    message: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit('input', val);
      },
    },
  },
});

var app = new Vue({
  el: '#app',
  data: {
    message1: 'm1',
    message2: 'm2',
  },
});

HTML:

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<script type="text/x-template" id="component-two-template">
  <input type="text" v-model="message"/>
</script>
<div id="app">
  <input type="text" v-model="message1"/>
  <component-two v-model="message2"></component-two>
  <p>Output</p>
  <pre>{{message1}}</pre>
  <pre>{{message2}}</pre>
</div>

InformationsquelleAutor Ferrybig

Vuejs utilise "props" pour les parents/enfants de comunication et "émettre" événements pour les enfants/parents comunication

Obtenir des données à partir d'une Vue unique composant dans un autre composant?

Vous devez vous rappeler que pour tous les accessoires que vous passez à l'enfant composant, vous devriez eu que des accessoires les accessoires tableau. Le même s'applique à des événements, tous les événements que vous émettez, vous devez attraper dans le composant parent, de sorte que:

composant un.vue:

<template>
  <div>
    <input type="text" v-model="input_one">
    <component-two
        @CustomEventInputChanged="doSomenthing">
    </component-two>
  </div>
</template>

<script>
  import ComponentTwo from 'component-two.vue'

  export default {
    name: "component-one",
    components: {
      ComponentTwo
    },
    data() {
      return {
        input_one: 'Hello from ComponentOne',
        input_two: ''
      }
    },
    methods: {
        doSomenthing ( data ) {
            this.input_two = data;
        }
    }
  }
</script>

composant-deux.vue:

<template>
  <div>
    <input type="text" v-model="input_two" @change="emitEventChanged>
  </div>
</template>

<script>
  export default {
    name: "component-two",
    data() {
      return {
        input_one: 'Hello from ComponentTwo'
      }
    },
    methods: {
        emitEventChanged () {
            $emit('CustomEventInputChanged', this.input_two);
        }
    }

  }
</script>

Cela devrait fonctionner

InformationsquelleAutor Luca Giardina

Vous devez vous connecter pour publier un commentaire.