Vue.js 中的子組件未向父組件發出數據

Question

下面是子組件和父組件。 我無法弄清楚我哪里出錯了，但我無法將值數據從子組件傳遞到父組件。 請幫我找出哪里出錯了。

子組件

<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>

Answer 1

您應該調用發出的事件處理程序而不在模板中指定參數：

   <Details @navigate="moveTo"/>

方法：

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

Answer 2

在Vue Guide中，您可以使用$event訪問發出的事件的值。

如果事件處理程序是一個方法並且沒有指定任何參數，Vue 會將發出的值作為該方法的第一個參數傳遞。

所以對於你的代碼，

一種解決方法是<Details @navigate="moveTo($event)"/> 。

另一個修復將是<Details @navigate="moveTo"/>與@Boussadjra Brahim 的答案相同。

下面是第一次修復的一個簡單演示：

 Vue.component('sidebar',{ template:` <div> <button class="btn btn-info" v-on:click="$emit('increment-btn', 1)">Increment on click</button> </div> ` }) new Vue ({ el:'#app', data:{ increment:0 }, methods: { getUpdated: function (newVal) { this.increment += newVal } } })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script> <div id="app"> <div class="container"> <div class="col-lg-offset-4 col-lg-4"> <sidebar v-on:increment-btn="getUpdated($event)"></sidebar> <p>{{ increment }}</p> </div> </div> </div>