從孩子發出變更給父母

我有一個問題，使得從子中的變化的父母綁定更新。從孩子發出變更給父母

我有以下VUE代碼：

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: '', 
     } 
     } 
    } 
    } 
})

在那裏我的父母結合孩子的計算性能視圖。我試圖從子項中獲取一個計算屬性，以更新父項中的<p>。我試過使用商店，但不幸的是似乎給出了完全相同的結果。

我已經創建this小提琴：https://jsfiddle.net/alexintime/02jxvqex/7/

來源

2017-08-14 VisualBean

這並不完全清楚，我想要做什麼。全名計算屬性在組件中定義。您是否有理由不想在父母中定義這一點？另外，雖然有幾個人提到你需要$發出值，因爲你正在傳遞一個* object *，這確實沒有必要。 – Bert

你將不得不從孩子vm.$emit發出一個事件到母部件，然後聽/獲取與vm.$on

值例如

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

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

來源

2017-08-14 12:24:24 highFlyingDodo

我已經更新了你的小提琴。 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/[email protected]"></script> 
 
<div id="user-example"> 
 
    <p> {{user.name.fullname}} </p> 
 
    <usercomp v-bind:user="user" 
 
    v-on:change-full-name="changeFullName"></usercomp> 
 
</div>

來源

2017-08-14 12:40:48

您可以完全刪除@keyup事件，[小提琴仍然可以]（https://jsfiddle.net/2jumkmvc/2/）。 – Bert

是的。））我剛纔展示了他如何從一個孩子改變父母...... –

我想指出他*是*從孩子改變父母。對象通過引用傳遞。在這種特定情況下，不需要$ emit。 – Bert

從孩子發出變更給父母

回答

相關問題