Javascript vuejs从子组件更新父数据

我开始玩vuejs（2.0）。 我构建了一个包含一个组件的简单页面。 该页有一个包含数据的Vue实例。 在那个页面上，我注册并将组件添加到html中。 该组件有一个

输入[type=text]

。我希望该值反映在父级（主Vue实例）上

如何正确更新组件的父数据？

---

从父级传递绑定道具不好，会向控制台抛出一些警告。他们的文档中有一些内容，但不起作用。

Vue 2.0中不推荐使用双向绑定，而是使用更为事件驱动的体系结构。一般来说，孩子不应该改变自己的道具。相反，它应该处理事件，并让父级响应这些事件

在您的特定情况下，可以将自定义组件与

v-model

一起使用。这是一种特殊的语法，允许类似于双向绑定的东西，但实际上是上述事件驱动体系结构的缩写。你可以在这里阅读->

下面是一个简单的例子：

Vue.component（'child'{
模板：“#子项”，
//该子级有一个名为“value”的道具。v-model将自动绑定到此道具
道具：['value']，
方法：{
updateValue:函数（值）{
这是。$emit（'input'，value）；
}
}
});
新Vue({
el:“#应用程序”，
数据：{
parentValue:“你好”
}
});

父值：{{parentValue}}

来自：

在Vue.js中，父子组件关系可以概括为道具下降、事件上升。父对象通过道具将数据向下传递给子对象，子对象通过事件向父对象发送消息。让我们看看他们接下来是如何工作的


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

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





HTML:


{{total}}


JS:

Vue.component（'button-counter'{
模板：“{counter}}”，
数据：函数（）{
返回{
柜台:0
}
},
方法：{
增量：函数（）{
这是一个计数器+=1
此.$emit（'增量'）
}
},
})
新Vue({
el:“#计数器事件示例”，
数据：{
总数：0
},
方法：{
incrementTotal:函数（）{
此值为1.total+=1
}
}
})
也可以将道具作为对象或数组传递。在这种情况下，数据将双向绑定：

（这一点在主题结尾处有所说明：）


Vue.component（'child'{
模板：“#子项”，
道具：{post:Object}，
方法：{
updateValue:函数（）{
此.$emit（'changed'）；
}
}
});
新Vue({
el:“#应用程序”，
数据：{
帖子：{msg:'你好'}，
更改：false
},
方法：{
saveChanges（）{
this.changed=true；
}
}
});

父值：{post.msg}

父消息：数据已更改-收到来自子消息的信号

在子组件中：

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

在父组件中：

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

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


方法：{
updateparent（变量）{
this.parentvariable=变量
}
}
我同意上述事件发射和v型模型的答案。然而，我想我会发布我所发现的关于具有多个表单元素的组件的信息，这些组件想要发送回它们的父级，因为这似乎是google返回的第一篇文章之一

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

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

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

下面是报告的内容：

在某些情况下，我们可能需要道具的“双向绑定”。
不幸的是，真正的双向绑定可能会产生维护问题，
因为子组件可以在没有源的情况下变异父组件
这种突变在父母和孩子身上都很明显

这就是为什么我们建议以
更新：myPropName
。例如，在具有
title
prop，我们可以传达分配新值的意图
与：

这样家长就可以听了
该事件并更新本地数据属性（如果需要）。对于
例如：



为方便起见，我们使用.sync修饰符提供此模式的简写：



您还可以通过对象发送，一次同步多个。查看子组件

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


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

使用
this.$emit（'event_name'）
向父组件发送事件


父组件

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


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

为了在父组件中侦听该事件，我们需要执行
v-on:event\u name
，并在该事件上执行一个方法（
ex.handleChange
）


完成：）
更简单的方法是使用此。$emit

父亲.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>

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


{{message}}
从“/Child”导入子项；
导出默认值{
姓名：“父亲”，
数据（）{
返回{
信息：“你在哪里，我的孩子？”
};
},
组成部分：{
小孩
},
方法：{
李斯特儿童（答复）{
this.message=回复；
}
}
};

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

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


回答爸爸
导出默认值{
姓名：“儿童”，
方法：{
replyDaddy（）{
这个。$emit（“listenerChild”，“我在这里，我的爸爸！”）；
}
}
};

我的完整示例：
正确的方法是

//Child.js
Vue.component（'子'{
方法：{
notifyParent:function（）{
此.$emit（'my-event'，42）；
<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>

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

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

<div :set="checkInventory">

props: ['inventory'],

computed: {
            checkInventory() {

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

            },
        }

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

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

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


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

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

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


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