javascript - 将更改从子级发送给父级

Question

这个问题已经有答案了:

vuejs update parent data from child component (18 个回答)

已关闭 5 年前。

我在根据子项的更改更新父项绑定(bind)时遇到问题。

我有以下 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: '',
        }
      }
    }
  }
})

我将 child 的计算属性绑定(bind)到 parent View 上。我正在尝试从 child 那里获取计算属性来更新 <p>在父级中。我尝试过使用商店，但不幸的是似乎给出了完全相同的结果。

我创建了this fiddle :https://jsfiddle.net/alexintime/02jxvqex/7/

Answer 1

我已经更新了你的 fiddle 。 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/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>