Watch für Datenänderung

Question

Ich habe derzeit mit dem Vue-Instanz-Konzept zu kämpfen. Ich verwende den Vue-Loader mit Webpack und erstellte eine Vue-Komponente, die ich importiere.

import Vue from 'vue'; 
import Search from '../Search.vue'; 
const vm = new Vue({ 
    el: 'search', 
    render: h => h(search) 
}); 

Auf der Komponente:

export default { 
    data: function() { 
     return { 
      results: 'current results' 
     } 
    } 
} 

Ich möchte Trigger und Ereignis aus dem Inneren des Bauteils (auf einer Eigenschaftsänderung), die ich von der Instanz beobachten kann.

die API verwenden sollte wie folgt sein:

vm.$watch('results', function (newVal, oldVal) { 
    // do something 
}) 

Aber ich nichts auslösen.

Ich glaube, ich bin abhanden zu verstehen, wie die Vue-Instanz zu verwenden, weil ich auch nicht alle Daten auf Initialisierung der Instanz hinzufügen kann, die auf der Komponente wie zugänglich ist:

const vm = new Vue({ 
    el: 'search', 
    data: {index: 1}, 
    render: h => h(search) 
}); 

Index auch ist nicht innerhalb der zu verwendenden Komponente verfügbar.

Wie behebe ich das?

Answer 1

Sie können hier einfach Wächter verwenden. Aber lassen Sie mich zuerst zeigen, wie Sie Daten innerhalb Ihrer Komponenten verwenden können. Wenn Sie also Daten in Vue-Instanzen definieren, stehen diese im Grunde zur Verfügung. Aber Sie möchten sie an Ihre Komponenten weitergeben. Hier ist props nützlich.

https://vuejs.org/v2/guide/components.html#Props

Grundsätzlich hier der wichtige Teil ist, dass Sie ein Kind wie du haben ...

export default { 
    data: function() { 
    return { 
     results: 'current results' 
    } 
    } 
} 

... und Sie wollen eine Art von Wert zur Verfügung stellen innen, es zu benutzen , die von außen kommen soll. So können Sie dies tun, indem die Definition, was Sie zu Ihrer Komponente gegeben werden, erwarten props durch Zugabe von in etwa so:

export default { 
    props: ['index'], 
    data: function() { 
    return { 
     results: 'current results' 
    } 
    } 
} 

Jetzt, Sie müssen es nur Ihre Komponente zu übergeben, wenn Sie es verwenden. Nehmen wir an, Sie geben Ihrer Komponente ein Namensattribut wie folgt: name: test-element und Ihre Komponente sitzt in einer eigenen Datei namens TestElement.vue - natürlich können Sie das ändern, was immer Sie wollen, aber lassen Sie uns für jetzt bleiben.

Dann können Sie Ihre Komponente innerhalb Ihrer Eltern mit import TestElement from './TestElement.vue' importieren - wieder kann Ihr Weg anders sein!

Jetzt registrieren Sie Ihre Komponente in Ihrer Vue-Instanz, indem Sie components: {'test-element': TestElement} verwenden.

Dies ermöglicht es Ihnen, ein HTML-Tag <test-element> in Ihrer aktuellen Datei zu verwenden, die dann das wiedergibt, was Sie in Ihrer Komponente definiert haben!

Jetzt binden Sie einfach Ihren Wert an der Stütze, die auf Ihre Komponente wird dann wie so geführt wird: <test-element :index="index"></test-element>

Und das ist es!Jetzt wird der Wert des in der Vue-Instanz Ihres Parents definierten Indexes an Ihre untergeordnete Komponente übergeben, wo Sie ihn verwenden können, z. B. in Ihrer Vorlage, um Berechnungen durchzuführen, was auch immer Sie wollen!

Jetzt ist Ihre Frage über Beobachter: innerhalb Ihrer Komponente, einen Beobachter wie so registrieren ...

export default { 
    props: ['index'], 
    data: function() { 
    return { 
     results: 'current results', 
     index: this.index // here we are using your prop! 
    } 
    }, 
    watch: { 
    index: function (newValue, oldValue) { 
     // here you can do whatever you want 
    } 
    } 
} 

, so dass es im Grunde! Sorry, wenn das ein wenig lang war, aber ich hoffe ich konnte dir helfen;)

Answer 2

Das muss ich eigentlich machen.

const Search = Vue.extend(Search); 
const vm = new Search({el: 'search'}); 

vm.$watch('results', function (newVal, oldVal) { 
    // do something 
}) 

Jetzt kann ich nach Änderungen an den Eigenschaften von außerhalb der .vue-Datei beobachten. Das war ein Problem, weil ich eine Mischung aus .js und precompile .vue mit vue-loader habe.