vuetify vue_vuetify js vue访问子组件表单数据

vuetify vue

While not overly difficult, I have found this topic to be lacking in documentation and real world examples online.

虽然不是很困难，但我发现在线文档和实际示例中缺少此主题。

Implementing two way data binding*(the Vue way) may not be obvious for new developers or those new to Vue/Vuetify. The following is an implementation of Vue’s custom events pattern I have found to work well when componentizing form elements.

对于新开发人员或Vue / Vuetify新手来说，实现双向数据绑定*(Vue方式)可能并不明显。 以下是Vue的自定义事件模式的实现，我发现在组合表单元素时可以很好地工作。

A working demo (via codesandbox) can be found here: https://codesandbox.io/s/throbbing-http-xo7t2?file=/src/App.vue

可以在此处找到有效的演示(通过codeandbox)： https ://codesandbox.io/s/throbbing-http-xo7t2?file=/src/App.vue

vue: 2.6.11
vuetify: 2.3.8

The CodeForm (parent component)

代码表格(父组件)

// <template>
<TextField
  v-bind:username="username"
  v-on:update:username="username = $event"
  labeltext="username"
/>// <script>
import { TextField } from "@/components/formFields";export default {
  name: "Feedback",
  components: {
    TextField
  },
  data: () => ({
    username: ""
  })
};

Form element (child component)

表单元素(子组件)

// <template>
<v-text-field 
  :label="labeltext" 
  v-model="val" 
  @input="$emit('update:username', $event)"
/>// <script>
export default {
  name: "TextField",
  props: {
    labeltext: String
  },
  data: () => ({
    val: ""
  })
};

翻译自: https://medium.com/@gregorysobotka/vuetify-js-vue-accessing-child-component-form-data-58b090795602

vuetify vue