如何在 vue js 中向组件发送数据？答案

【问题标题】：How to send data to component in vue js?如何在 vue js 中向组件发送数据？
【发布时间】：2018-02-12 00:32:29
【问题描述】：

如何向 Vue.js 中的组件发送数据？我收到了服务器对按钮单击事件的响应，现在我想将此响应发送到组件并使用v-for 显示在list 上。

这是我的代码：

var store = new Vuex.Store({
    state: {
        Item: []
    },
    mutations: {
        getItems: function (state) {

        }

    },
    actions: {
        fetchData:function (context) {
           Vue.http.get('data.json').then(function(response){
             alert('dd')
}, function(error){
    console.log(error.statusText);
});

        }
    }
})

var httprequest = Vue.extend({
    "template": '#http_template',
    data: function () {
        return {
            items: store.state.Item
        }
    },
    methods: {
        fetchData: function () {
          store.dispatch('fetchData')
        },

    }
})

Vue.component('httprequest', httprequest);

var app = new Vue({
    el: '#App',
    data: {},


});

【问题讨论】：

how to share data between components in VUE js (while creating list)的可能重复

标签： javascript vue.js vuejs2 vue-component vuex

【解决方案1】：

你几乎把所有事情都做对了。您唯一缺少的是在获取数据后，您没有将其分配给state.Item。请检查以下代码：

var store = new Vuex.Store({
    state: {
      Item: []
    },
    mutations: {
      getItems: function(state, items) {
        items.forEach(function(item) {
          state.Item.push(item)
        })
      }
    },
    actions: {
      fetchData: function(context) {
        Vue.http.get('data.json').then(function(response) {
          context.commit('getItems', response.data)
        }, function(error) {
          console.log(error.statusText);
        });
      }
    }
  })

可以在here找到工作示例。

【讨论】：

【解决方案2】：

一般来说，vue 遵循的原则是数据通过属性向下传递到 DOM 树，然后通过事件向上传递。参见例如https://vuejs.org/v2/guide/index.html#Composing-with-Components。

因此，要将数据导入组件，请在组件内定义属性 myProp，并在使用组件时通过 v-bind:myProp="myData" 绑定它。

要从您的组件中取回数据，请使用this.$emit('myUpdateEvent', myUpdatedData)，并使用v-on:myUpdateEvent="myUpdateHandler" 监听事件。

【讨论】：

请删除这个anwser。我使用的是vuex而不是发射
请检查我的 plunker。我没有使用发射或广播
我指出的原则与您的用例非常相关：如果您有一个通用列表组件，您不希望直接在其中绑定 Vuex 数据，而是将其绑定到父组件并将其作为属性传递给列表。

【解决方案3】：

您不会向组件发送数据。您设置反应管道，数据在需要时移动。在您的情况下，使用 vuex，您希望在组件的数据上注册 store.state.items。

您可以根据需要使用道具，但您仍然需要在父母的数据中进行注册。如果您的组件是单例，仅用于此页面，您最好直接在组件的数据中注册您需要的内容。

【讨论】：