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

Posted 2023-02-23

【中文标题】数据未从 Vue.js 中的子组件发送到父组件

【英文标题】：Data not emitted from child to parent component in Vue.js

【发布时间】：2020-11-20 11:43:15

【问题描述】：

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

子组件

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

【问题讨论】：

您似乎没有注册父模板中使用的Details 组件。是不是打错字了？

@YomS。错字错误。请立即查看

@YomS。在 moveTo 方法中，值会引发错误属性或方法“值”未在实例上定义，但在渲染期间被引用。

【参考方案1】：

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

【参考方案2】：

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

   <Details @navigate="moveTo"/>

方法：

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

【讨论】：

不客气，您必须注意模板中的值被视为未定义并再次以未定义的形式传递给处理程序