VueJS - Wie erhält die Komponente ein globales Datenelement?

Question

Ich habe Code wie folgt aus:

Vue.component("sample", { 
    inherit: true, 
    template: "#sample", 
    props: { 
     active : "active", 
     ... 
    }, 
    methods: { 
     forceChangeActive: function(){ 
     var activeItem = this.$parent._data.active; 
     var modalSetup = this.$parent._data.showModal; 
     console.log("1.before function", this.$parent._data); 
     this.$parent.$options.methods.baseAction(activeItem, modalSetup); 
     console.log("2.before function", this.$parent._data); 
     }); 
    } 
}); 
new Vue({ 
    el: "#app", 
    data: { 
     active: 0, 
     showModal: false, 
     ... 
    }, 
    methods: { 
     baseAction: function(activeItem, modalSetup){ 
      console.log("3.modal", modalSetup, "activeItem": activeItem); 
      modalSetup = true; 
      activeItem = 2; 
      console.log("4.modal", modalSetup, "activeItem": activeItem); 
     } 
    } 
}); 

Es gibt aktive und ShowModal Datenvariablen in neuen Vue. Jetzt werde ich undefined für beide, wenn ich this.active oder this.showModal verwende. Und Konsolenausgabe ist:

1. vor Funktion Objekt {aktiv = 0, ShowModal = false}
2. modal falsch, activeItem 0
3. modal wahr, activeItem 2
4. vor Funktion Objekt {aktiv = 0, ShowModal = false}

Wie ich variable`s Werte in neuen Vue oder in compone ändern nicht?

Answer 1

inherit:true ist veraltet.

Sie müssen die Eigenschaften active und showModal explizit an die untergeordnete Komponente übergeben. Sie können .sync verwenden, um sicherzustellen, dass sie auch wieder an das übergeordnete Element zurückgegeben werden: