如何从 Vuetify 对话框访问数据？答案

【问题标题】：How to acces data from Vuetify dialog?如何从 Vuetify 对话框访问数据？
【发布时间】：2019-11-22 14:34:04
【问题描述】：

我正在使用 VueJS Vuetify 框架，我需要从对话框中获取数据？如何从 app.vue 访问对话框 NewUserPopup.vue 的用户名或密码等数据？

App.vue = 主模板
NewUserPopup.vue = 对话框模板，在 app.vue 中导入

NewUserPopup.vue 对话框：

<template>
  <v-dialog v-model="dialog" max-width="600px">
    <template v-slot:activator="{ on }">
      <v-btn v-on="on" color="primary" class="mb-3">Add new user</v-btn>
    </template>
    <v-card>
      <v-card-title>
        <h3 class="primary--text">Add a New User</h3>
      </v-card-title>
      <v-card-text>
        <v-form class="px-3">
          <v-text-field label="Username" v-model="username" prepend-icon="account_box"></v-text-field>
          <v-text-field label="Firstname" v-model="firstname" prepend-icon="person"></v-text-field>
          <v-text-field label="Lastname" v-model="lastname" prepend-icon="person"></v-text-field>
          <v-text-field :type="'password'" label="Password" v-model="password" prepend-icon="edit"></v-text-field>
          <v-card-actions>
            <v-spacer></v-spacer>
            <v-btn class="primary mx-0 mt-3" @click="submit" >
              Add User
              <v-icon right>done</v-icon>
            </v-btn>
          </v-card-actions>
        </v-form>
      </v-card-text>
    </v-card>
  </v-dialog>
</template>

<script lang="ts">
export default {
  data () {
    return{
      dialog: false,
      username: '',
      firstname: '',
      lastname: '',
      password: '',
    }
  },
  methods:{
    submit(){
      this.dialog = false;
    }
  }
}
</script>

主 App.vue：

<template>
  <v-app >
    <new-user-popup></new-user-popup>
  </v-app>
</template>

<script lang="ts">
import Vue from 'vue';
import NewUserPopup from './components/NewUserPopup.vue'


export default {
  name: 'App',
  components:{
    NewUserPopup
  },

  data () {
    return{

    }
  },
};
</script>

如何访问数据？

【问题讨论】：

在 App.vue 中声明您的数据并将它们作为道具传递给 NewUserPopup，然后在保存时发出一个函数，该函数将用新创建的数据替换数据。

标签： typescript vue.js vuejs2 popup vuetify.js

【解决方案1】：

你有两个解决方案：

您可以使用 password 和 username 创建一个商店，或者您可以在 App.js 中声明用户名和密码，将它们传递给您的对话框，然后发出变化。

【讨论】：

【解决方案2】：

vuejs 中的子与父通信

NewUserPopup.vue 对话框：

<template>
  <v-dialog v-model="dialog" max-width="600px">
    <template v-slot:activator="{ on }">
      <v-btn v-on="on" color="primary" class="mb-3">Add new user</v-btn>
    </template>
    <v-card>
      <v-card-title>
        <h3 class="primary--text">Add a New User</h3>
      </v-card-title>
      <v-card-text>
        <v-form class="px-3">
          <v-text-field label="Username" v-model="model.username" prepend-icon="account_box"></v-text-field>
          <v-text-field label="Firstname" v-model="model.firstname" prepend-icon="person"></v-text-field>
          <v-text-field label="Lastname" v-model="model.lastname" prepend-icon="person"></v-text-field>
          <v-text-field :type="'password'" label="Password" v-model="model.password" prepend-icon="edit"></v-text-field>
          <v-card-actions>
            <v-spacer></v-spacer>
            <v-btn class="primary mx-0 mt-3" @click="submit" >
              Add User
              <v-icon right>done</v-icon>
            </v-btn>
          </v-card-actions>
        </v-form>
      </v-card-text>
    </v-card>
  </v-dialog>
</template>

<script lang="ts">
export default {
  data () {
    return{
      dialog: false,
      model:{}
    }
  },
  methods:{
    submit(){
      this.dialog = false;
      this.$emit('userInfo',this.model)
    }
  }
}
</script>

主 App.vue：

<template>
  <v-app >
    <new-user-popup @userInfo="getUserData($event)"></new-user-popup>
  </v-app>
</template>

<script lang="ts">
import Vue from 'vue';
import NewUserPopup from './components/NewUserPopup.vue'


export default {
  name: 'App',
  components:{
    NewUserPopup
  },

  data () {
    return{

    }
  },
  methods:{
    getUserData(value){
      console.log(value)
    }
  }
};
</script>

【讨论】：