Question

所以我在Vue上开发app。我在组件之间发送和接收数据时遇到问题。已经尝试使用$dispatch/$broadcast，$emit/$on，但现在仍在使用。我想将选定的active_club从ClubSelection.vue发送到vue_main.js。

Vue版本：2.0.3

我的应用程序的结构：

vue_main - 主Vue文件
1. HeaderElement.vue（ vue_main的子项）
  1. ClubSelection.vue（ HeaderElement的子项）

需要将clubSelection的active_club发送到vue_main。

ClubSelection.vue

    <script>

    export default{
        props: [
            'club', 'title'
        ],
        created(){

            //Get club list
            this.$http.get('/api/clubs', function(data) {
                this.clubs = data;
                console.log(data);

                //read active club from parent
                this.selected = this.$parent.$parent.active_club;
            });

        },
        data(){
            return{
                clubs: [],
                selected: null,
            }
        },
        watch: {
            selected: function(v) {
                this.club = v;

                //Post to database selected club
                this.$http.post('/api/clubs/' + v + '/active')

            },
            club: function(v) {
                this.selected = v;

                //Change active_club at parent (THIS NOT WORKING)
//              this.$emit('active_club', v);
//              this.$parent.active_club = v;
                club.$emit('active_club', v);

            },
        }

    }
</script>

vue_main.js

    const app = new Vue({
    router,
    data() {
        return {
            user: [],
            active_club: null,
            ranking: null
        }
    },
    created: function() {
        var self = this;

        this.$http.get('/api/users/me', function(data) {
            this.user = data;
            self.active_club = data.active_club;

        })

    }


}).$mount('#app');

const club = new Vue();

//THIS NOT WORKING
club.$on('active_club', function (id) {

    alert(id)
    this.active_club = id;
});

错误：

Vue警告]：观察者＆＃34;俱乐部＆＃34; （在组件中找到   ）

vue_main.js：16924未捕获（承诺）ReferenceError：俱乐部不是   定义

我尝试了很多设置，这是其中之一。如何使这个工作？

Answer 1

$dispatch和$broadcast已弃用Vue 2.0。

在您的情况下，您需要的是父组件和子组件之间的通信。当孩子$emit成为一个事件时，父母可以通过提供模板标记本身的方法来监听它，使用v-on:parentMethod()，如下所示：

<child-component v-on:child-event="handlerMethod"></child-component>

以上标记在父组件的模板中完成。父组件需要handlerMethod中的methods。

以下是Stackoverflow上的“父子通信”示例问题，其中还有一个jsFiddle示例：Delete a Vue child component

您可以使用上述答案作为参考，在您的应用中实施$emit。

编辑：附加说明

我忘记提及有关三级层次结构的说明。在您的应用中，您具有以下层次结构：

parent：vue_main

孩子1：HeaderElement

孩子1.1：ClubSelection

要将事件从ClubSelection发送到vue_main，您可以使用non parent-child communication method，也可以使用中间HeaderElement中继事件。

以下是事件中继的工作原理：

第1步：ClubSelection发送$emit，由HeaderElement使用v-on收到。
第2步：HeaderElement中的handlerMethod执行this.$emit，主模板可以使用其他v-on接收。{/ li>

虽然上述内容可能看起来有点复杂，但它比广播应用程序中的每个组件都要高效得多，因为它通常在Angualr 1.x或其他框架中完成。

Vue 2 - 组件之间的通信（发送和接收数据）

1 个答案: