从孩子发出变更给父母

我有一个问题，使得从子中的变化的父母绑定更新。从孩子发出变更给父母

我有以下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

从孩子发出变更给父母

回答

相关问题