javascript - Vue.js:定位除 vue 对象中绑定(bind)的 div 之外的其他 div

Question

我使用 Vue 和 Leaflet 在 map 上显示多边形(区域)，并在 map 上单击特定多边形后显示有关特定多边形的适当信息(消息)。我在其中渲染消息的 div 具有 id“#messagearea”，并绑定(bind)到“el”对象。为了显示适当的消息，我依赖于“Zone-id”。现在我还想将信息显示到另一个具有不同 id 的 div 中。我还依赖于这里的“Zone-id”，所以我想在同一个 Vue 中执行此操作。如果我要创建另一个 Vue，我必须再次渲染 Leaflet map 以编写另一个 polygon.on('click',...) 函数，该函数显示多边形的适当信息。实现这一点的最优雅和/或最简单的方法是什么？这是我的 vue 对象:

var mapVue = new Vue({
    el: '#messagearea',
    data: {
        function() {
            return {
                map: false
            };
        },
        zones: [],
        messages: [],
    },
    ready: function () {
        this.map = L.map('map').setView([51.959, 7.623], 14);
        L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        }).addTo(this.map);
        this.$http.get('/api/zones', function (data) {
            this.$set('zones', data);
            for (var i = 0; i < this.zones['Zones'].length; i++) {
                polygon = L.polygon(
                    this.zones['Zones'][i]['Geometry']['Coordinates']).addTo(this.map);
                polygon.bindPopup(this.zones['Zones'][i]['Name']);
                polygon.on('click', messageCallback(i))
              // HERE I WOULD LIKE TO ADD THE FUNCTION FOR THE OTHER DIV
            }
            function messageCallback(i) {
                return function () {
                    mapVue.getMessages(mapVue.zones['Zones'][i]['Zone-id']);
                }
            }
        });
    },
    methods:
    {
        getMessages: function (id) {
            this.$http.get('/api/messages?zone=' + id, function (data) {
                console.log("messages called");
                this.$set('messages', data['Messages']);
            });
        }
    }
})

Answer 1

我通过使用 Vue.component()、vue.$dispatch() 和 vue.$broadcast() 解决了这个问题强>功能。我只是将区域 id 分派(dispatch)给父组件，然后使用广播功能将其传递给所有需要区域 id 的子组件。显示适当的消息不再是问题了。