时间戳

首页 > 解决方案 > 将数据从子组件传递到父组件 Vuetify

vue.js - 将数据从子组件传递到父组件 Vuetify

问题描述

我正在尝试使用 $emit 将数据从子组件传递到父组件，但它不起作用。

这就是我正在做的：

// child component
<v-text-field
   @change="function"
   v-model="choice1"
   label="Choice 1"
   ></v-text-field>

// Script 
metods:{
function(event) {
    this.$emit('input', this.choice1); // I tried 'change' at the place of 'input' but with no result too.  
 },
}

// parent component
<typeQst @change="getRep"></typeQst> // my child component

//script 
getRep(value){
     console.log(value);
        }

标签： vue.jsvuetify.js

解决方案

我看到一些错误：

    // child component
   <v-text-field

    <!-- DO NOT USE FUNCTION AS NAME -->
    @change="function"
    v-model="choice1"
    label="Choice 1"
    ></v-text-field>


   // Script 

   <!-- Here is Methods not Metods -->
   methods:{

     <!-- Same as before, change this method name accordingly -->
     function(event) {
       this.$emit('change', this.choice1); // I tried 'change' at the place of 'input' 
         but with no result too.  
        },
   }


   // parent component
   <!-- Here is most probably type-qst not typeQst, camel case get resolved automatically -->
   <typeQst @change="getRep"></typeQst> // my child component

   <!-- All This part needs to be in the vue export syntax as for the component before: -->
  [..]
  methods: {
     //script 
     getRep(value){
       console.log(value);
       }
   }

推荐阅读