子组件

使用这个。$emit('event_name')向父组件发送一个事件。

父组件

为了在父组件中监听该事件，我们执行v-on:event_name，并在该事件发生时执行一个方法(例如handleChange)

:完成)

在孩子身上

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

他的例子将告诉你如何通过提交按钮将输入值传递给父节点。

首先将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
    });
}

我认为这个可以达到目的:

@change=“$emit（变量）”

在父组件中——>

数据:function(){ 返回{ siteEntered: false， }; }，

在子组件中——>

这个。父母。美元数据。siteEntered = true;

双向绑定在Vue 2.0中已弃用，转而使用事件驱动的体系结构。一般来说，孩子不应该改变它的道具。相反，它应该$emit事件并让父进程响应这些事件。

在您的特定情况下，您可以使用带有v-model的自定义组件。这是一种特殊的语法，它允许一些接近双向绑定的东西，但实际上是上面描述的事件驱动体系结构的简写。你可以在这里阅读-> https://v2.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>

这就是为什么子对象上的道具需要命名为value，以及为什么子对象需要$emit一个名为input的事件。