javascript - 从子项向父项发出更改[重复项]

This question already has answers here:

vuejs update parent data from child component
                            
                                （10个答案）
                            
                    
                2年前关闭。
        

    

我在从子项的更改中进行父绑定更新时遇到问题。

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

最佳答案

我已经更新了你的小提琴。 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: {
  	    fullname: function() {
    	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() {
  	    return {
	  user: {
  	    name: {
          fullname: 'empty until type',
    	  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>