vuejs 从子组件更新父数据

Question

我开始玩 vuejs (2.0)。我构建了一个包含一个组件的简单页面。该页面有一个带有数据的 Vue 实例。在该页面上，我注册了该组件并将其添加到 html。该组件有一个 input[type=text]。我希望该值反映在父级（主 Vue 实例）上。

如何正确更新组件的父数据？从父级传递绑定的 prop 是不好的，并且会向控制台抛出一些警告。他们的文档中有一些内容，但没有用。

Answer 1

Two-way 绑定在 Vue 2.0 中已被弃用，取而代之的是使用更 event-driven 的架构。一般来说，child 不应该改变它的属性。相反，它应该 $emit 事件并让 parent 响应这些事件。

在您的特定情况下，您可以将自定义组件与 v-model 结合使用。这是一种特殊语法，允许接近 two-way 绑定，但实际上是上述 event-driven 架构的 shorthand。您可以在这里阅读 -> https://vuejs.org/v2/guide/components.html#Form-Input-Components-using-Custom-Events.

这是一个简单的例子：

Vue.component('child', {
  template: '#child',
  
  //The child has a prop named 'value'. v-model will automatically bind to this prop
  props: ['value'],
  methods: {
    updateValue: function (value) {
      this.$emit('input', value);
    }
  }
});

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>

<div id="app">
  <p>Parent value: {{parentValue}}</p>
  <child v-model="parentValue"></child>
</div>

<template id="child">
   <input type="text" v-bind:value="value" v-on:input="updateValue($event.target.value)">
</template>

文档指出

<custom-input v-bind:value="something" v-on:input="something = arguments[0]"></custom-input>

等同于

<custom-input v-model="something"></custom-input>

这就是为什么 child 上的 prop 需要命名为 value，以及为什么 child 需要 $emit 一个名为 input.

的事件

Answer 2

来自documentation:

In Vue.js, the parent-child component relationship can be summarized as props down, events up. The parent passes data down to the child via props, and the child sends messages to the parent via events. Let’s see how they work next.

How to pass props

以下是将道具传递给子元素的代码：

<div>
  <input v-model="parentMsg">
  <br>
  <child v-bind:my-message="parentMsg"></child>
</div>

How to emit event

HTML:

<div id="counter-event-example">
  <p>{{ total }}</p>
  <button-counter v-on:increment="incrementTotal"></button-counter>
  <button-counter v-on:increment="incrementTotal"></button-counter>
</div>

JS：

Vue.component('button-counter', {
  template: '<button v-on:click="increment">{{ counter }}</button>',
  data: function () {
    return {
      counter: 0
    }
  },
  methods: {
    increment: function () {
      this.counter += 1
      this.$emit('increment')
    }
  },
})
new Vue({
  el: '#counter-event-example',
  data: {
    total: 0
  },
  methods: {
    incrementTotal: function () {
      this.total += 1
    }
  }
})

Answer 3

也可以将道具作为对象或数组传递。在这种情况下，数据将被 two-way 绑定：

（题末注明：https://vuejs.org/v2/guide/components.html#One-Way-Data-Flow）

Vue.component('child', {
  template: '#child',
  props: {post: Object},
  methods: {
    updateValue: function () {
      this.$emit('changed');
    }
  }
});

new Vue({
  el: '#app',
  data: {
    post: {msg: 'hello'},
    changed: false
  },
  methods: {
    saveChanges() {
        this.changed = true;
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>

<div id="app">
  <p>Parent value: {{post.msg}}</p>
  <p v-if="changed == true">Parent msg: Data been changed - received signal from child!</p>
  <child :post="post" v-on:changed="saveChanges"></child>
</div>

<template id="child">
   <input type="text" v-model="post.msg" v-on:input="updateValue()">
</template>

Answer 4

在子组件中：

this.$emit('eventname', this.variable)

在父组件中：

<component @eventname="updateparent"></component>

methods: {
    updateparent(variable) {
        this.parentvariable = variable
    }
}

Answer 5

我同意上述事件发射和 v 模型的答案。但是，我想我会 post 我发现的关于具有多个表单元素的组件，这些组件想要发回给它们的父级，因为这似乎是 google.

返回的第一篇文章

我知道这个问题指定了一个输入，但这似乎是最接近的匹配并且可能会为使用类似 vue 组件的人节省一些时间。此外，还没有人提到 .sync 修饰符。

据我所知，v-model 解决方案仅适用于返回父级的一个输入。我花了一些时间寻找它，但 Vue (2.3.0) 文档确实显示了如何将发送到组件的多个道具同步回父级（当然是通过 emit）。

它被恰当地称为 .sync 修饰符。

documentation 是这样说的：

In some cases, we may need “two-way binding” for a prop. Unfortunately, true two-way binding can create maintenance issues, because child components can mutate the parent without the source of that mutation being obvious in both the parent and the child.

That’s why instead, we recommend emitting events in the pattern of update:myPropName. For example, in a hypothetical component with a title prop, we could communicate the intent of assigning a new value with:

this.$emit('update:title', newTitle)

Then the parent can listen to that event and update a local data property, if it wants to. For example:

<text-document   
 v-bind:title="doc.title"  
 v-on:update:title="doc.title = $event"
></text-document>

For convenience, we offer a shorthand for this pattern with the .sync modifier:

<text-document v-bind:title.sync="doc.title"></text-document>

您也可以通过对象发送来一次同步多个。查看 documentation here

Answer 6

子组件

使用this.$emit('event_name')向父组件发送事件。

父组件

为了在父组件中监听该事件，我们执行 v-on:event_name 并且我们要在该事件上执行的方法 (ex. handleChange) 发生了

完成:)

Answer 7

更简单的方法是使用this.$emit

Father.vue

<template>
  <div>
    <h1>{{ message }}</h1>
    <child v-on:listenerChild="listenerChild"/>
  </div>
</template>

<script>
import Child from "./Child";
export default {
  name: "Father",
  data() {
    return {
      message: "Where are you, my Child?"
    };
  },
  components: {
    Child
  },
  methods: {
    listenerChild(reply) {
      this.message = reply;
    }
  }
};
</script>

Child.vue

<template>
  <div>
    <button @click="replyDaddy">Reply Daddy</button>
  </div>
</template>

<script>
export default {
  name: "Child",
  methods: {
    replyDaddy() {
      this.$emit("listenerChild", "I'm here my Daddy!");
    }
  }
};
</script>

我的完整示例：https://codesandbox.io/s/update-parent-property-ufj4b

Answer 8

正确的做法是$emit() an event in the child component that the main Vue instance listens for.

// Child.js
Vue.component('child', {
  methods: {
    notifyParent: function() {
      this.$emit('my-event', 42);
    }
  }
});

// Parent.js
Vue.component('parent', {
  template: '<child v-on:my-event="onEvent($event)"></child>',
  methods: {
    onEvent: function(ev) {
      v; // 42
    }
  }
});

Answer 9

另一种方法是将您的 setter 的引用作为 prop 从父组件传递给子组件，类似于他们在 React 中的做法。比如说，你在父组件上有一个方法 updateValue 来更新值，你可以像这样实例化子组件：<child :updateValue="updateValue"></child>。那么在child上你就会有一个对应的prop：props: {updateValue: Function}，在模板中输入变化时调用方法：<input @input="updateValue($event.target.value)">.

Answer 10

我不知道为什么，但我刚刚使用数据作为对象成功更新了父数据，:set & computed

Parent.vue

<!-- check inventory status - component -->
    <CheckInventory :inventory="inventory"></CheckInventory>

data() {
            return {
                inventory: {
                    status: null
                },
            }
        },

Child.vue

<div :set="checkInventory">

props: ['inventory'],

computed: {
            checkInventory() {

                this.inventory.status = "Out of stock";
                return this.inventory.status;

            },
        }

Answer 11

他的示例将告诉您如何在提交按钮上将输入值传递给父级。

首先将eventBus定义为新的Vue。

//main.js
import Vue from 'vue';
export const eventBus = new Vue();

Pass your input value via Emit.
//Sender Page
import { eventBus } from "../main";
methods: {
//passing data via eventbus
    resetSegmentbtn: function(InputValue) {
        eventBus.$emit("resetAllSegment", InputValue);
    }
}

//Receiver Page
import { eventBus } from "../main";

created() {
     eventBus.$on("resetAllSegment", data => {
         console.log(data);//fetching data
    });
}

Answer 12

我认为这可以解决问题：

@change="$emit(variable)"

Answer 13

在child

 <input
            type="number"
            class="form-control"
            id="phoneNumber"
            placeholder
            v-model="contact_number"
            v-on:input="(event) => this.$emit('phoneNumber', event.target.value)"
    />

data(){
    return {
      contact_number : this.contact_number_props
    }
  },
  props : ['contact_number_props']

在parent

<contact-component v-on:phoneNumber="eventPhoneNumber" :contact_number_props="contact_number"></contact-component>


 methods : {
     eventPhoneNumber (value) {
      this.contact_number = value
    }

Answer 14

在父组件中 -->

data : function(){
            return {
                siteEntered : false, 
            };
        },

在子组件中 -->

this.$parent.$data.siteEntered = true;

Answer 15

2021 年答案 - Vue 2.3+

简短回答：只需在父项中添加 .sync 修饰符并将数据作为 props 传递给子项：

    // PARENT:
    data () {
    return {
      formData: {
        members: [] //<- we wanna pass this one down to children and add/remove from the child component
      }
    }

   // PARENT TEMPLATE:
   <!-- ADD MEMBERS -->
  <add-members :members.sync="formData.members" />

嵌套子组件：AddMembers.vue

export default {
  name: 'AddMembers',
  props: ['members'],
  methods: {
    addMember () {
      this.members.push(new Member()) // <-- you can play and reactivity will work (in the parent)  
    },
    removeMember (index) {
      console.log('remove', index, this.members.length < 1)
      this.members.splice(index, 1)
    }
  }
}

长话短说：实际上子组件的更改正在 $emitted 并更新父组件的 formData.members[]。

来源：Mauro Perez at medium

Answer 16

简介

我正在寻找在 vue3 中将数据从 parent 发送到 child（并返回）（我知道这个问题是关于 vue2 的，但是当时没有关于 vue3 的引用).

下面是工作样板结果，纯“html + js”，没有包装器、模块等，我有一些警告，解释。

备注：

正在插入 child - 行

<component-a :foo="bar" @newfooevent="bar = $event"></component-a>`

我使用 short-hand :foo="bar" 将 parent.bar 绑定到 child.foo，与 v-bind:foo="bar" 相同。它通过 props.
将数据从 parent 传递到 child
警告：事件侦听器应仅 放置在 child 组件标记中！

那是@newfooevent="bar = $event"部分。

您无法在 <div id="app"> 或 parent 内的任何其他地方捕捉到信号。

不过，这是宇宙的 parent 一侧，在这里您可以访问所有 parent 的数据并从 child 的信号中提取数据去处理它。

您可以创建应用程序，并在其后定义组件（app.component("component-a", ...) 部分。

注意：没有必要预先声明组件，例如C/C++ 中的函数。您可以创建使用该组件的应用程序，然后再定义该组件。我浪费了很多时间寻找以某种方式声明它的方式 - 不需要。
在这里您可以找到 v-model 用法的一个很好的示例，以及我用来解决问题的代码：https://javascript.plainenglish.io/vue-3-custom-events-d2f310fe34c9

例子

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>App</title>
    <meta charset="utf-8" />
    <script src="https://unpkg.com/vue@next"></script>
  </head>
  <body>
    <div id="app">
      <component-a :foo="bar" @newfooevent="bar = $event"></component-a>
      <p>Parent copy of `bar`: {{ bar }}</p>
      <button @click="bar=''">Clear</button>
    </div>

    <script>
      const app = Vue.createApp({
        data() {
          return {
            bar: "bar start value"
          };
        }
      });      

      app.component("component-a", {
        props: {
          foo: String
        },
        template: `
          <input 
            type="text"
            :value="foo"
            @input="$emit('newfooevent', $event.target.value)">
        `
      });      

      app.mount("#app");
    </script>
  </body>
</html>

Answer 17

还有另一种将数据更改从子级传递到父级的方法，它使用 provide-inject 方法。父组件为子组件“提供”数据或方法，然后将此数据或方法“注入”到子组件中——但它也可用于触发父组件中的方法并向其传递参数。
当有一个子组件恰好嵌入到多个其他组件中时，这种方法特别有用。此外，在大型项目中，必须注意不要丢失 provide 和 inject 用法的概述。

父（顶级）组件示例 App.vue 使用 provide 访问它的方法 updateParentValue（如果提供了方法而不是数据，provide 是方法的形式）：

<template>
  <h2>App.vue, parentValue is: <em>{{ parentValue }}</em></h2>
  <ChildComponent1 />
</template>

<script>
import ChildComponent1 from "./components/ChildComponent1.vue";

export default {
  data() {
    return {
      parentValue: "",
    };
  },
  components: {
    ChildComponent1,
  },
  provide() {
    return {
      updateParent: this.updateParentValue,
    };
  },
  methods: {
    updateParentValue($value) {
      this.parentValue = $value;
    },
  },
};
</script>

本例组件Component4.vue在“底”，即App.vue包含Component1，Component1包含Component2...直到Component4它实际上利用 inject 访问父方法，然后调用该方法并传递参数 $value（这里只是一个随机数）：

<template>
  <div>
    <h2>ChildComponent4.vue</h2>
    <button @click="updateParent(Math.random())">
      Update parent value in App.vue
    </button>
  </div>
</template>

<script>
export default {
  inject: ["updateParent"],
};
</script>

整个示例可用 here。
Vue.js documentation

vuejs 从子组件更新父数据

vuejs update parent data from child component

javascript

vue.js

vue-component

How to pass props

How to emit event

简介

备注：

例子