Vuejs2 VueJS 2-在mixin中侦听事件

我目前正在尝试为Vue创建一个mixin，它基本上创建了一个属性传递链。我将更清楚地阐明应该发生的事情

假设我得到了3个分量；A、 B和C

A和B都是称为“内容窗格”的相同组件（模板代码见下文）

{{label}}

C是一个动态组件，这意味着它是可互换的，可以是任何组件

现在，我希望能够从组件A中的组件C访问某些数据，为此，我正在尝试创建一个mixin，该mixin动态地提供一个数据属性来执行此操作：

<script>
export default {
    name: 'passthrough',

    props: {
        passthrough : {
            type    : Object
        }
    },

    data ()
    {
        return {
            // This object allows you to
            // update the parent.
            passthroughModifier : {
                // We use the data object inside the
                // original object because Vue doesn't
                // want to detect direct prop changes
                // when they are added dynamically
                // into the root object...
                data : {}
            }
        }
    },

    methods : {
        /**
         * This function fires an emit event.
         */
        emitUpdate ()
        {
            this.$emit('passthrough-update', this.passthroughModifier);
        }
    },

    watch : {
        /**
         * Emit an event once the passthrough
         * property has been changed.
         * We need to use a deep watcher.
         */
        'passthroughModifier' : {
            handler : function (val) {
                this.emitUpdate();
            },
            deep: true
        }
    },

    created ()
    {
        // Allow access to the instance
        // inside the iteration.
        let _that = this;

        // Attach a listener for the passthrough update
        // which will walk through all the keys in the
        // data object and hard-set these locally.
        this.$on('passthrough-update', function (data) {
            Object.keys(data).forEach(function (index) {
                _that.passthroughModifier[index] = data[index];
            });
        });
    }
}

导出默认值{
名称：'passthrough'，
道具：{
传递：{
类型：对象
}
},
数据（）
{
返回{
//此对象允许您
//更新父级。
传递修改器：{
//我们使用数据库中的数据对象
//原始对象，因为Vue没有
//要检测直接道具更改吗
//当它们被动态添加时
//进入根对象。。。
数据：{}
}
}
},
方法：{
/**
*此函数触发一个发射事件。
*/
emitUpdate（）
{
this.emit（'passthrough-update'，this.passthroughModifier）；
}
},
观察：{
/**
*一旦通过，就发出一个事件
*属性已更改。
*我们需要一个深度观察者。
*/
“通过修改器”：{
处理程序：函数（val）{
这个.emitUpdate（）；
},
深：是的
}
},
创建（）
{
//允许访问该实例
//在迭代内部。
让_that=这个；
//为直通更新附加侦听器
//它将遍历数据库中的所有键
//数据对象，并在本地硬设置这些对象。
此.$on（'passthrough-update'，函数（数据）{
Object.keys（数据）.forEach（函数（索引）{
_passthroughModifier[index]=数据[index]；
});
});
}
}

除了侦听$passthroughModifier上的观察者触发的“passthrough更新”事件外，其他一切都正常工作

所以,；当组件C更新其$.passthroughModifier.data时，会发出事件，但组件B无法捕获此事件

我曾尝试在mixin的

created（）

方法中侦听此事件（请参见上面的代码），但似乎该事件只在触发事件的组件中捕获。所以组件C触发事件，组件C监听自己的事件

---

我希望有人能告诉我这是否可能，如果可能的话，我做错了什么。

组件A、B和C的父子关系是什么？

<script>
export default {
    name: 'passthrough',

    props: {
        passthrough : {
            type    : Object
        }
    },

    data ()
    {
        return {
            // This object allows you to
            // update the parent.
            passthroughModifier : {
                // We use the data object inside the
                // original object because Vue doesn't
                // want to detect direct prop changes
                // when they are added dynamically
                // into the root object...
                data : {}
            }
        }
    },

    methods : {
        /**
         * This function fires an emit event.
         */
        emitUpdate ()
        {
            this.$emit('passthrough-update', this.passthroughModifier);
        }
    },

    watch : {
        /**
         * Emit an event once the passthrough
         * property has been changed.
         * We need to use a deep watcher.
         */
        'passthroughModifier' : {
            handler : function (val) {
                this.emitUpdate();
            },
            deep: true
        }
    },

    created ()
    {
        // Allow access to the instance
        // inside the iteration.
        let _that = this;

        // Attach a listener for the passthrough update
        // which will walk through all the keys in the
        // data object and hard-set these locally.
        this.$on('passthrough-update', function (data) {
            Object.keys(data).forEach(function (index) {
                _that.passthroughModifier[index] = data[index];
            });
        });
    }
}