我正在尝试从组件获取数据并将其传递给根 Vue 实例中的变量。
我的 Vue 实例:
new Vue({
el: '#root',
data: {
searchResultObject: ''
},
methods: {
//....
}
});
我的全局组件:
Vue.component('user-container-component', {
props: {
prop: null
},
template: '#user-container-template',
data: function () {
return {
searchResultObject: ''
}
},
methods: {
dbSearch_method: function () {
var self = this;
$.ajax({
url: 'Home/LocalSearch',
type: 'GET',
success: function (response) {
self.searchResultObject = response;
},
error: function () {
alert('error');
}
});
}
}
})
按下用户界面中的按钮会触发dbSearch_method，该部分有效。我想知道如何将数据获取到实例中的 searchResultObject，而不是组件？
HTML:
<button class="btn btn-link bold" v-on:click="dbSearch_method">{{item}}</button></li>
编辑:
HTML:
<div id="root">
//...
<div id="collapse2" class="panel-collapse collapse">
<ul class="list-group">
<root-component v-for="item in customerObject"
v-bind:prop="item"
v-bind:key="item.id">
</root-component>
</ul>
</div>
</div>
//...
<script type="text/x-template" id="root-template">
<li class="list-group-item">
<div class="bold">
<button v-if="open" v-on:click="toggle" class="btn btn-link"><span class="glyphicon glyphicon-chevron-down" style="color: black"></span></button>
<button v-else="open" v-on:click="toggle" class="btn btn-link"><span class="glyphicon glyphicon-chevron-right" style="color: black"></span></button>
<button class="btn btn-link bold">{{prop.name}}</button>
</div>
<ul class="no-bullets" v-show="open">
<park-container-component v-bind:prop="prop.parks"/>
<admin-container-component v-bind:prop="prop.admins" />
<user-container-component v-on:search-results-fetched="addSearchResults($event)" v-bind:prop="prop.admins" />
</ul>
</li>
</script>
<script type="text/x-template" id="user-container-template">
<li class="list-group-item">
<div class="bold">
<button v-if="open" v-on:click="toggle" class="btn btn-link"><span class="glyphicon glyphicon-chevron-down" style="color: black"></span></button>
<button v-else="open" v-on:click="toggle" class="btn btn-link"><span class="glyphicon glyphicon-chevron-right" style="color: black"></span></button>Users
<button class="btn btn-primary btn-xs pull-right" data-toggle="modal" data-target="#inviteAdminModal">Add</button>
</div>
<ul class="no-bullets" v-show="open" v-for="item in prop">
<li><button class="btn btn-link bold" v-on:click="dbSearch_method">{{item}}</button></li>
</ul>
</li>
</script>
脚本:
new Vue({
el: '#root',
data: {
//...
searchResultObject: ''
},
methods: {
//...
addSearchResults: function(data) {
alert('adding');
this.searchResultObject = data;
}
}
});
Vue.component('user-container-component', {
props: {
prop: null
},
template: '#user-container-template',
data: function () {
return {
open: false
}
},
methods: {
toggle: function () {
this.open = !this.open;
},
dbSearch_method: function () {
var self = this;
$.ajax({
url: 'Home/LocalSearch',
type: 'GET',
success: function (response) {
self.$emit('search-results-fetched', response);
},
error: function () {
alert('error');
}
});
}
}
})
最佳答案
正如您所说，组件 user-container-component 位于 id #root 的元素内部，假设您的 html 如下所示:
<div id="root">
<user-container-component></user-container-component>
</div>
在您的user-container-component中，在您的dbSearch_method ajax请求的成功回调中发出一个事件，如下所示:
Vue.component('user-container-component', {
props: {
prop: null
},
template: '#user-container-template',
data: function () {
return {
searchResultObject: ''
}
},
methods: {
dbSearch_method: function () {
var self = this;
$.ajax({
url: 'Home/LocalSearch',
type: 'GET',
success: function (response) {
this.$emit('search-results-fetched', response);
},
error: function () {
alert('error');
}
});
}
}
})
在您的 html 设置中，在 user-container-component 上设置一个事件监听器，如下所示:
<div id="root">
<user-container-component @search-results-fetched="addSearchResults($event)"></user-container-component>
</div>
在您的根实例中添加 addSearchResults 方法:
new Vue({
el: '#root',
data: {
searchResultObject: ''
},
methods: {
addSearchResults(data){
this.searchResultObject = data;
}
}
});
关于javascript - 如何在 Vue 中将数据从组件传递到实例，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46906921/