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

我正在尝试从组件获取数据，并将其传递给根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\u方法

，该部分工作。我想知道在我的实例中如何将数据获取到

searchResultObject

，而不是组件

HTML:

---

您可以将该值作为事件发出，供父级侦听

$.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"/>

---

您可以将该值作为事件发出，供家长收听

$.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"/>

---

正如您所说，组件

用户容器组件

位于id为

#root的元素中，假设您的html如下所示：

<div id="root">

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

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');
                }
            });
        }
   }
})

<div id="root">

    <user-container-component @search-results-fetched="addSearchResults($event)"></user-container-component>
</div>

在html设置中，
用户容器组件上的事件侦听器如下所示：

<div id="root">

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

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');
                }
            });
        }
   }
})

<div id="root">

    <user-container-component @search-results-fetched="addSearchResults($event)"></user-container-component>
</div>

正如您所说，组件
用户容器组件
位于id为
#root
的元素中，假设您的html如下所示：

<div id="root">

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

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');
                }
            });
        }
   }
})

<div id="root">

    <user-container-component @search-results-fetched="addSearchResults($event)"></user-container-component>
</div>

在html设置中，
用户容器组件上的事件侦听器如下所示：

<div id="root">

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

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');
                }
            });
        }
   }
})

<div id="root">

    <user-container-component @search-results-fetched="addSearchResults($event)"></user-container-component>
</div>

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

或者，您可以使用eventbus解决同一级别的组件数据传输问题

对于您的情况，我认为应该使用$emit

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

在您的根vue实例中，您可以使用$on来监听事件触发。
对于大型项目，您可以使用vuex来管理数据

或者，您可以使用eventbus解决同一级别的组件数据传输问题

对于您的情况，我认为应该使用$emit

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

在您的根vue实例中，您可以使用$on来监听事件触发。
用户容器组件是否是id为
#root
的元素的直接子元素？您的意思是它是否在
中？然后是的，但它不在我的脚本的根实例中。它是一个全球性的组成部分。至少我认为它是
的子元素，是从另一个组件（在
内部）调用的组件，如果这有意义的话。
用户容器组件是id
#root
元素的直接子元素吗？你的意思是它是否在
内部？然后是的，但它不在我的脚本的根实例中。它是一个全球性的组成部分。至少我认为它算是
的子组件，它是从另一个组件调用的组件（在
中），如果这有意义的话。太棒了，这看起来像我需要的，尽快在大约一个小时后回复你。我刚刚添加了一个编辑。我尝试添加您显示的所有内容，但从未调用方法
addSearchResult
。我添加了我能想到的所有相关代码。请注意，
模板不在
根目录
div
中，但由于它们是从该
div
中调用的，所以这不重要？@Green\que应该可以工作。。你能在JSFIDLE ao中复制它吗？它可以很容易地调试，我试试看！）在编写JS fiddle时，我意识到，我实际上在根组件中有一个中间步骤。因此，我在该组件中添加了另一个事件，该事件将其发送到实际的Vue实例中，并且可以正常工作：DAwesome这看起来像我需要的，请在大约一小时后尽快与您联系。我刚刚添加了一个编辑。我尝试添加您显示的所有内容，但从未调用方法
addSearchResult
。我添加了我能想到的所有相关代码。请注意，
模板不在
根目录
div
中，但由于它们是从该
div
中调用的，所以这不重要？@Green\que应该可以工作。。你能在JSFIDLE ao中复制它吗？它可以很容易地调试，我试试看！）在编写JS fiddle时，我意识到，我实际上在根组件中有一个中间步骤。因此，我在该组件中添加了另一个事件，将其发送到实际的Vue实例，它可以工作：D