Question

我有一个父表单组件和一个孩子。如何使用v模型将数据从一个传递到另一个？ 它们在不同的文件中。我正在使用Quasar框架的组件。

父组件

<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（）如何工作？

自动翻译。

Answer 1

我认为您对子组件和父组件有些困惑。在您的代码上Nome是子组件，使用Nome的窗体是父组件。

您可以使用ref从父表单组件调用Nome上的reset方法。

这是一个工作示例-

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>

这是上述代码https://jsfiddle.net/azs06/u4x9jw62/34/

的jsfiddle链接

如何在组件之间传递v模型值

1 个答案: