从 vuejs2 中的子组件更改父道具

Question

我想从子组件中更改父级道具的值。这在 vuejs 1 中效果很好，但在 vue 2 中效果不佳（我想在 vue.js 2 中使用它）。

这是一个小例子：

HTML

<div id="app">
   <parent :content="{value:'hello parent'}"><</parent>
</div>

JavaScript

var parent = {
  template: '<child :content="content"></child>',
  props: ['content'],
};

var child = {
  template: '<div>{{ content.value }}<button @click="change">change me</button></div>',
  props: ['content'],
  methods: {
    change() {
      this.content.value = "Value changed !";
    }
  }
};

Vue.component('child', child);
Vue.component('parent', parent);

new Vue({
  el: '#app',
});

https://jsfiddle.net/f5gt94f2/

Answer 1

tl;dr：在 vue2 中，你需要使用.sync modifier。

在父级的 data (see reason here) 中创建 content 属性的本地副本。

var parent = {
  ...
  data() {
    return {
      localContent: this.content // creating a local copy, so we can mutate and react to it
    }
  }
};

现在，将 localContent 传递给孩子，而不是 content。还有pass it using .sync so it can be updated：

var parent = {
  template: '<div><child :content.sync="localContent"></child></div>',
  ...                     //     ^^^^^^^^^^^^^^^^^^^^-- changed here

现在，在孩子中，不要分配给this.content.value，而是发出更新事件：

var child = {
    ...
    change() {
      this.$emit('update:content', {value: "Value changed !"})
    }
  }
};

这个带有新值的事件将被父级接收，并将更新其localContent，这也将因此更新子级的content 属性。

下面的最终运行代码。

var parent = {
  template: '<div><child :content.sync="localContent"></child><br>At parent: {{ localContent }}</div>',
  props: ['content'],
  data() {
    return {
      localContent: this.content
    }
  }
};

var child = {
  template: '<div>At child: {{ content.value }}<button @click="change">change me</button></div>',
  props: ['content'],
  methods: {
    change() {
      this.$emit('update:content', {value: "Value changed !"})
    }
  }
};

Vue.component('child', child);
Vue.component('parent', parent);

new Vue({
  el: '#app'
});

<script src="https://unpkg.com/vue@2.5.13/dist/vue.js"></script>

<div id="app">
  <parent :content="{value:'hello parent'}"></parent>
</div>

Answer 2

你必须为此使用发射事件

家长：

<child :content="content" @updateParent="updateValue"></child>

methods: {
  updateValue (value) {
    // Your code here
  }
}

---

孩子：

props: ['content'],
methods: {
  change () {
    this.$emit('updateParent', value)
  }
}

https://vuejs.org/v2/guide/components.html#Custom-Events