vue js 如何向组件发送数据?
How to send data to component in vue js?
如何向 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: {},
});
一般来说,vue 遵循这样的原则,即数据通过属性在 DOM 树中向下移动,通过事件向上移动。例如参见 [=14=].
因此,要将数据导入您的组件,请在您的组件内定义一个 属性 myProp
,并在使用您的组件时通过 v-bind:myProp="myData"
.
绑定它
要从您的组件取回数据,请使用 this.$emit('myUpdateEvent', myUpdatedData)
并使用 v-on:myUpdateEvent="myUpdateHandler"
监听事件。
您不向组件发送数据。您设置响应式管道,数据在需要时四处移动。在您的情况下,使用 vuex,您想要在组件的数据上注册 store.state.items。
如果你愿意,你可以使用道具,但你仍然需要在parent的数据中进行注册。如果您的组件是单例的,仅用于此页面,您最好直接在组件的数据中注册您需要的内容。
你几乎做对了所有事情。您唯一缺少的是在获取数据后,您没有将其分配给 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。
如何向 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: {},
});
一般来说,vue 遵循这样的原则,即数据通过属性在 DOM 树中向下移动,通过事件向上移动。例如参见 [=14=].
因此,要将数据导入您的组件,请在您的组件内定义一个 属性 myProp
,并在使用您的组件时通过 v-bind:myProp="myData"
.
要从您的组件取回数据,请使用 this.$emit('myUpdateEvent', myUpdatedData)
并使用 v-on:myUpdateEvent="myUpdateHandler"
监听事件。
您不向组件发送数据。您设置响应式管道,数据在需要时四处移动。在您的情况下,使用 vuex,您想要在组件的数据上注册 store.state.items。
如果你愿意,你可以使用道具,但你仍然需要在parent的数据中进行注册。如果您的组件是单例的,仅用于此页面,您最好直接在组件的数据中注册您需要的内容。
你几乎做对了所有事情。您唯一缺少的是在获取数据后,您没有将其分配给 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。