Vue.js 2 将数据从组件传递到根实例答案

【问题标题】：Vue.js 2 pass data from component to root instanceVue.js 2 将数据从组件传递到根实例
【发布时间】：2017-06-15 19:33:06
【问题描述】：

我有一个发出 AJAX 请求的组件。在回调函数中，我想将一个值传递回父实例或根实例。

所以我在组件中的回调函数例如是：

function callbackFunc(vm, response){
  vm.$emit('setValue', response.id);
}

在我的根实例中，我尝试过使用这样的 setValue 方法：

export default {
  name: 'app',
  data () {
    return {
      value : ''
    }
  },
  methods: {
    setValue: function(value){
      console.log(value);
    }
  }
}

这不起作用。文档似乎说您需要在模板中添加一个事件才能将其全部连接起来，但在这种情况下这是行不通的。

有什么想法吗？

干杯！

【问题讨论】：

你能显示更多的代码吗？你的回调是如何被调用的等等。
从字面上看，它只是全局范围内的一个函数。 vm 是对 vue 实例的引用，因此可以调用 $emit。
如果它在全局范围内，为什么不直接使用 const app = new Vue(...) 和在 callbackFunc 中使用 app.setValue(response.id)。
用完整的根实例更新了我的问题。我将如何让它与它一起工作？干杯！
Vue.js what's the difference of $emit and $dispatch?的可能重复

标签： vue.js vuejs2 vue-component

【解决方案1】：

我正在使用 vue-router。所以有一个 App 的根元素组件，然后是名为 Hello 的组件，它具有 ajax调用

在父组件的模板中，您将有一个<router-view><\router-view>，这是 vue-router 将放置您的孩子的地方。要将所有内容连接起来，您需要将指令添加到模板中：

<router-view v-on:setValue="parentMethod" ><\router-view>

当孩子在ajax调用后调用$emit("setValue")时，会在父母身上触发parentMethod()。目前尚不清楚您为什么说将其连接到模板中不起作用。没有模板，就没有真正的父/子关系。

【讨论】：

干杯！现在试试这个。我得到：属性或方法“parentMethod”未在实例上定义，但在渲染期间被引用。确保在 data 选项中声明响应式数据属性。
抱歉，我修好了。太棒了，这行得通！谢谢！我现在更好地理解发生了什么。我想我需要将它绑定到点击事件或模糊或其他东西。再次感谢！
抱歉 - 不清楚。我的意思是 parentMethod 在你父母的通用方法中。你需要在你的父级上写这个方法，并调用它类似于 parentMethod 甚至 setValue() 模板告诉你的父级组件监听事件 setValue 然后在父级上调用一些方法。
很高兴它正在工作。在 Vue 和（Angular）中，让父/子单向通信在它“点击”之前花了我几次尝试
是的，这让我非常困惑！再次感谢！