In Vuejs, wie Watcher zu allen Requisiten hinzuzufügen und die gleiche Funktion wie ein Rückruf zu verwenden?

Question

Wie der Titel, möchte ich für all die Requisiten Beobachter und die gleiche Callback hinzufügen, aber ich neet wie dies in der Unterkomponente codieren:

<script> 
 
export default { 
 
    props: { 
 
    a: String, 
 
    b: String, 
 
    c: String 
 
    }, 
 
    watch: { 
 
    a (v) { this.handler(v) }, 
 
    b (v) { this.handler(v) }, 
 
    c (v) { this.handler(v) }, 
 
    }, 
 
    methods: { 
 
    handler (v) { 
 
     // code... 
 
    } 
 
    } 
 
} 
 
</script>

Und wissen Sie, Wie vereinfacht man das?

Answer 1

Verwenden Sie eine Funktion, um Ihre Komponente zu erstellen.

function buildComponent(properties){ 
    const base = { methods:{ handler(v){ console.log(v) }}, props:{}, watch:{}} 

    for (let prop of properties){ 
    base.props[prop] = String 
    base.watch[prop] = function(v) {this.handler(v)} 
    } 
    return base 
} 

export default buildComponent(["a","b","c"]) 

Vue ist nur Javascript.