子から親に変更を送信します

Question

子の変更から親バインディング更新を作成する際に問題があります。私は両親に子供の計算されたプロパティを結合してい

Vue.component('usercomp', { 
    template: '<input v-model="user.name.lastname">', 
    props:['user'], 
    computed: { 
    fullname: function() { 
     return this.user.firstname + ' ' + this.user.lastname; 
    } 
    } 
}); 

new Vue({ 
    el: '#user-example', 
    data: function() { 
    return { 
     user: { 
     name: { 
      fullname: '', 
      firstname: '', 
      lastname: '', 
     } 
     } 
    } 
    } 
}) 

ビュー：

は、私は、次のVUEのコードを持っています。 私は子から計算されたプロパティを取得して、親の<p>を更新しようとしています。 私は店を使用しようとしましたが、残念なことにまったく同じ結果を出すようです。

私が作成したthisフィドル：https://jsfiddle.net/alexintime/02jxvqex/7/

Answer 1

あなたはその後、親コンポーネントに子からvm.$emitでイベントを発する聞く/たとえばvm.$on

で値を取得する必要があります

vm.$on('name', function (val) { 
    console.log(val) 
}) 

vm.$emit('name', 'John Doe') 
// -> "hi" 

Answer 2

あなたのフィドルを更新しました。 https://jsfiddle.net/observing/2jumkmvc/9/

Vue.component('usercomp', { 
 
    template: `<div> 
 
    <input v-model="user.name.firstname"> 
 
    <br> 
 
    <input v-model="user.name.lastname"> 
 
    </div>`, 
 
    props:['user'], 
 
    computed: { 
 
    \t  fullname: function() { 
 
    \t return this.user.name.firstname + ' ' + this.user.name.lastname; 
 
    } 
 
    }, 
 
    watch: { 
 
    fullname: function (val) { 
 
     this.$emit('change-full-name', val) 
 
    } 
 
    } 
 
}); 
 

 
new Vue({ 
 
    el: '#user-example', 
 
    data: function() { 
 
    \t  return { 
 
\t user: { 
 
    \t  name: { 
 
      fullname: 'empty until type', 
 
    \t firstname: 'James', 
 
      lastname: 'Holden', 
 
     } 
 
     } 
 
    } 
 
    }, 
 
    methods: { 
 
    changeFullName: function (fullName) { 
 
     this.user.name.fullname = fullName 
 
    } 
 
    } 
 
})

<script src="https://unpkg.com/vue@2.4.2"></script> 
 
<div id="user-example"> 
 
    <p> {{user.name.fullname}} </p> 
 
    <usercomp v-bind:user="user" 
 
    v-on:change-full-name="changeFullName"></usercomp> 
 
</div>