Как обновить компонент vuejs от родителя

Question

Я немного потерял в VueJs, я пытаюсь сделать vue с данными, обновленными компонентом и Vue.

Я понял, как обновлять родительские значения с помощью $ emit.

Может кто-то тел, если это возможно

HTML код

<div id="app2" v-cloak> 
    <p>{{labels.lbl1}}: {{values.value}}</p> 
    how direct set {{labels.lbl1}} here: <input type="text" v-model:value="values.value"> can set the child value? 
    <hr/> 
    <child2 v-model:value="values.value" v-bind:lbl="labels.lbl1"></child2> 
</div> 

<template id="child2"> 
    <div> 
    Set {{internallbl1}} in child: 
    <input type="text" v-model="internalValue" > 
    <p>Value : {{value}}</p> 
    </div> 
</template> 

Js Код:

Vue.component('child2', { 
    template: '#child2', 

    //The child has a prop named 'value'. v-model will automatically bind to this prop 
    props: ['value','lbl'], 
    data: function() { 
    return { 
     internalValue: '', 
     internallbl1:'' 
    } 
    }, 
    watch: { 
    'internalValue': function() { 
     // When the internal value changes, we $emit an event. Because this event is 
     // named 'input', v-model will automatically update the parent value 
     this.$emit('input', this.internalValue); 
    } 
    }, 
    created: function() { 
    // We initially sync the internalValue with the value passed in by the parent 
    this.internalValue = this.value; 
    this.internallbl1 = this.lbl; 
    } 
}); 
new Vue({ 
    el: '#app2', 
    data: { 
    labels : {lbl1:'Parent value 1'}, 
    values : {value: 'hello'}, 
    } 
}); 

Вот jsFiddle: https://jsfiddle.net/davidhequet/ag0thqar/5/

Спасибо, Дэвид

Answer 1

Что я понимаю, internalValue не меняется при изменении значения в родительском. Вы можете установить Бодрствующие на value и всякий раз, когда она меняется, установите internalValue, как следующее:

Vue.component('child2', { 
    template: '#child2', 
    ... 
    ... 
    ... 
    created: function() { 
    // We initially sync the internalValue with the value passed in by the parent 
    this.internalValue = this.value; 
    this.internallbl1 = this.lbl; 
    }, 
    watch: { 
    'internalValue': function() { 
     // When the internal value changes, we $emit an event. Because this event is 
     // named 'input', v-model will automatically update the parent value 
     this.$emit('input', this.internalValue); 
    },  
    value: function(newVal) { 
     this.internalValue = newVal 
    } 
    }, 
}); 

См работает fiddle.