How to pass v-model value between components
Question
I have a parent form component and a child. How do I pass data from one to another using v-model? They are in different files . I'm using the components of the Quasar Framework.
Parent Component
<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>
Child Component
<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>
How do I onReset() work?
Automatically translated.
1 answers
solution1
0 ACCPTED 2019-05-24 09:14:54
I think you have some confusion about your child component and parent component. On your code Nome is the child component and the form that using Nome is the parent component.
You can use ref to call the reset method on Nome from the parent form component.
Here is a Working example -
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>
Here is a jsfiddle link for the above codes https://jsfiddle.net/azs06/u4x9jw62/34/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.