从孩子向父母发出变化[重复]

Question

我在通过子项的更改来更新父绑定时遇到问题。

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

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: {
  	    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>