Как передать значение v-модели между компонентами - PullRequest
Новая
       37

Как передать значение v-модели между компонентами

0 голосов
/ 23 мая 2019

У меня есть родительский компонент формы и дочерний элемент.Как передать данные от одного к другому с помощью v-модели? Они находятся в разных файлах .Я использую компоненты Quasar Framework.

Родительский компонент 

<template>
  <q-input
    label="Nome *"
    lazy-rules
    :rules="[val => (val && val.length > 0) || 'Por favor, digite o seu nome']"
    v-model="nome"
  />
</template>

<script>
export default {
  name: "Nome",
  data() {
    return {
      nome: "Max"
    };
  }
};
</script>

Дочерний компонент 

<template>
  <div class="q-pa-md" style="max-width: 500px">
  <q-form @reset="onReset" class="q-gutter-md">
      <Nome> </Nome>              
      <div>
   <q-btn label="Reset" type="reset" color="red" flat class="q-ml-sm" />
      </div>
    </q-form>
  </div>
</template>

<script>
import Nome from "components/Nome.vue";
export default {
  components: { Nome },  

  onReset() {
    this.name = null;
  }
};
</script>

Как мне onReset () работать?

Автоматический перевод.

1 Ответ

0 голосов
/ 24 мая 2019

Я думаю, что у вас есть некоторая путаница относительно вашего дочернего компонента и родительского компонента.В вашем коде Nome является дочерним компонентом, а форма, использующая Nome, является родительским компонентом.

Вы можете использовать ref для вызова метода сброса на Nome из родительского компонента формы.

Вот рабочий пример - 

Vue.component("nome-input", {
	data(){
  	return {
    	input: ""
    }
  },
  template: `
  <input @input="onInput" type="text" v-model="input">
  `,
  methods: {
  	reset(){
    	this.input = ""
    },
    onInput(){
    	this.$emit('onInput', this.input);
    }
  }
});
Vue.component("user-form", {
	data(){
  	return {
    	name: '',
    }
  },
  components: {
  },
  template: `
  <div>
  	{{name}}
    <nome-input ref="nome" @onInput="updateName"></nome-input>
    <button @click.prevent="save">Save</button>
    <button @click.prevent="reset">reset</button>
  </div>
  `,
  methods: {
  	save(){
    	console.log(this.name);
    },
    reset(){
    	this.name = "";
    	this.$refs.nome.reset();
    },
    updateName(value){
    	this.name = value;
    }
  }
  
});

new Vue({
  el: "#app",
})
body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
  <user-form></user-form>
</div>
</body>
</html>

Вот ссылка jsfiddle для вышеуказанных кодов https://jsfiddle.net/azs06/u4x9jw62/34/

...