1

所以我在 Vue 中开发应用程序。我在组件之间发送和接收数据时遇到问题。已经尝试过$dispatch/$broadcast，$emit/$on但现在仍在工作。我想从active_club发送ClubSelection.vue到vue_main.js。

Vue 版本：2.0.3

我的应用程序的结构：

  1. vue_main - 主 Vue 文件
    1. HeaderElement.vue（vue_main的子级）
      1. ClubSelection.vue ( HeaderElement的孩子)

需要从 ClubSelection 发送 active_club 到 vue_main。

俱乐部选择.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警告]：观察者“俱乐部”中的错误（在组件中找到）

vue_main.js:16924 Uncaught (in promise) ReferenceError: club is not defined

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

4

1 回答 1

0

$dispatch并在Vue 2.0$broadcast中被弃用。

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

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

上面的标记是在父组件的模板中完成的。并且父组件需要handlerMethod在其methods.

这是 Stackoverflow 上的示例“父子通信”问题，其中还有一个 jsFiddle 示例：删除 Vue 子组件

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

编辑：附加说明

我忘了提及您拥有的关于三层结构的注释。在您的应用程序中，您具有以下层次结构：

父级：vue_main

孩子 1: HeaderElement

子 1.1：俱乐部选择

对于从 ClubSelection 向 vue_main 发送事件，您可以使用非父子通信方法，也可以使用中间 HeaderElement 中继事件。

以下是事件中继的工作方式：

  • 第 1 步：ClubSelection 发送一个$emit，由 HeaderElement 使用 接收v-on。
  • 第 2 步：handlerMethod在 HeaderElement 中执行 a this.$emit，您的主模板可以使用另一个v-on.

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

于 2016-10-27T09:18:40.400 回答