Question

我正在尝试从组件中获取数据并将其传递给我的根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');
                }
            });
        }
    }
})

按下我的UI中的按钮会触发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');
                }
            });
        }
    }
})

Answer 1

正如您所说，组件>>> d3 = { 'id':dict1['id'] , 'key1':dict1['key1']-dict2['key1'] , 'key2':dict1['key2']-dict2['key2'] } >>> d3 => {'id': 1001, 'key1': 10, 'key2': 10}位于ID为user-container-component的元素内部，将您的html命名为：

#root

你的

<div id="root">

    <user-container-component></user-container-component>
</div>

中的

在user-container-component ajax请求的succss回调中发出了一个事件，如下所示：

dbSearch_method

在你的html设置中，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'); } }); } } })上的事件监听器就像这样：

user-container-component

在根实例中添加<div id="root"> <user-container-component @search-results-fetched="addSearchResults($event)"></user-container-component> </div>方法：

addSearchResults

Answer 2

您可以将值作为父级听取的事件发出

$.ajax({
            url: 'Home/LocalSearch',
            type: 'GET',
            success: function (response) {
                self.searchResultObject = response;
                this.$emit('onSearchResult', response)
            },
            error: function () {
                alert('error');
            }
        });

然后在您的父级中，您可以通过设置侦听器

来获取它

<user-container-component v-on:onSearchResult="parentListener"/>

Answer 3

对于大型项目，您可以使用vuex来管理数据。

或者您可以使用eventbus来解决相同级别的组件数据传输问题。here

根据您的情况，我认为它应该使用$ emit。

@Component

在您的根vue实例中，您可以使用$ on来监听事件触发。here

如何将数据从组件传递到Vue中的实例

3 个答案: