如何在组件之间传递 v-model 值

Question

我有一个父表单组件和一个子组件。如何使用 v-model 将数据从一个传递到另一个？ 它们在不同的文件中。我正在使用 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 上的重置方法。

这是一个工作示例 -

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 link https://jsfiddle.net/azs06/u4x9jw62/34/

如何在组件之间传递 v-model 值

How to pass v-model value between components

javascript

vue.js

vue-component

v-model

quasar-framework