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

我已经更新了你的小提琴。 https://jsfiddle.net/observing/2jumkmvc/9/

＆＃13;

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
    }
  }
})

＆＃13;

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

＆＃13;

Answer 2

您必须从子组件向父组件发出包含vm.$emit的事件，然后使用vm.$on

侦听/获取值

例如

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

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

从子级发出对父级的更改

2 个答案: