时间戳

首页 > 解决方案 > 数据未从 Vue.js 中的子组件发送到父组件

javascript - 数据未从 Vue.js 中的子组件发送到父组件

问题描述

下面是子组件和父组件。我无法弄清楚我哪里出错了，但我无法将值数据从子组件传递到父组件。请帮我找出哪里出错了。

子组件

<template>
  <div>
    <v-btn class="red-button" @click.prevent="checkAgent('information')">
      Information      
    </v-btn>
    <v-btn class="red-button" @click.prevent="checkAgent('policies')">
      Policies
    </v-btn>
  </div>
</template>


<script>

  export default {
  data: function () {
    return {
    }
  },

  methods: {
    checkAgent(value) {
      this.$emit('navigate', value);  
    },
  }
};
</script>

父组件

<template>
  <v-layout row wrap>
    <v-flex xs12 sm12 lg12 >
      <div class="account-section">
        <Details @navigate="moveTo(value)"/>
      </div>
    </v-flex>
  </v-layout>          
</template>

<script>
  import Details from 'views/agent/edit.vue';
  

  export default {
    components: {
      Details,
    },
    data: function () {
      return {
      }
    },
    methods: {
      moveTo(value) {
        console.log(value)
      },
    },
    
  };
</script>

标签： javascriptvue.jsvuejs2vue-componentvuetify.js

解决方案

您应该调用发出的事件处理程序而不在模板中指定参数：

   <Details @navigate="moveTo"/>

方法：

   methods: {
      moveTo(value) {
        console.log(value)
      },
    },

推荐阅读