Javascript Vue$emit未在父级内部触发

出于某种原因，我的$emit似乎没有在父级内部启动。我基本上是在尝试为html表单创建一个模式弹出窗口。在我的header组件中，我有一个触发$emit的按钮，然后我尝试在表单组件上的app.js中侦听此事件。但是当发射时，表单组件什么也不做

这是我的密码

client/src/app.js

<template>
    <div id="app">
        <MainHeader :modalVisability="modal" />
        <OppForm :modalVisability="modal" v-on:showModal="modal = $event"/>

        <div>{{ modal }}</div>
    </div>
</template>

<script>
import MainHeader from './components/MainHeader.vue';
import OppForm from './components/oppForm.vue';

export default {
    name: 'App',
    components: {
        MainHeader,
        OppForm
    },
    data() {
        return {
            modal: false
        }
    }
}
</script>

{{modal}}
从“/components/MainHeader.vue”导入MainHeader；
从“/components/OppForm.vue”导入OppForm；
导出默认值{
名称：“应用程序”，
组成部分：{
主标题，
OppForm
},
数据（）{
返回{
模态：假
}
}
}

客户端/组件/MainHeader.vue

<template>
    <div id="main_header_wrap">
        <header>
            <button v-on:click="showOppForm">Add Post</button>
        </header>

        <div>{{ modalVisability }}</div>
    </div>
</template>

<script>
    export default {
        props: {
            modalVisability: Boolean
        },
        methods: {
            showOppForm() {
                this.modalVisability = true;
                this.$emit('showModal', this.modalVisability);
            }
        },
    }
</script>

添加帖子
{{modalvability}}
导出默认值{
道具：{
可模性：布尔
},
方法：{
showOppForm（）{
this.modalviability=true；
此.emit（'showModal'，此.modalviability）；
}
},
}

client/src/components/oppForm.vue

<template>
    <div id="opp_form" >
        <form @submit.prevent="SubmitOpp" v-if="modalVisability">
            <input type="text" name="company_name" v-model="company_name">
            <button type="submit">Submit</button>
        </form>

        <div>{{ modalVisability }}</div>
    </div>
</template>

<script>
    import axios from 'axios';

    export default {
        name: 'oppForm',
        props: {
            modalVisability: Boolean,
        },
        data() {
            return {
                company_name: ''
            }
        },
        methods: {
            SubmitOpp() {
                axios.post('http://localhost:5000/', {
                    company_name: this.company_name,
                })
                .then(function (response) {
                    console.log(response);
                })
                .catch(function (error) {
                    console.log(error);
                });
            }
        }
    }
</script>

提交
{{modalvability}}
从“axios”导入axios；
导出默认值{
名称：'oppForm'，
道具：{
可修改性：布尔，
},
数据（）{
返回{
公司名称：“”
}
},
方法：{
submitop（）{
轴心柱http://localhost:5000/', {
公司名称：this.company\u name，
})
.然后（功能（响应）{
控制台日志（响应）；
})
.catch（函数（错误）{
console.log（错误）；
});
}
}
}

我修复了您代码中的某些内容。请参见下面的示例：

client/src/app.js

<template>
    <div id="app">
        <MainHeader :modalVisability="modal" />
        <OppForm :modalVisability="modal" v-on:showModal="modal = $event"/>

        <div>{{ modal }}</div>
    </div>
</template>

<script>
import MainHeader from './components/MainHeader.vue';
import OppForm from './components/oppForm.vue';

export default {
    name: 'App',
    components: {
        MainHeader,
        OppForm
    },
    data() {
        return {
            modal: false
        }
    }
}
</script>

App={{modal}}
从“/components/MainHeader.vue”导入MainHeader；
从“/components/OppForm.vue”导入OppForm；
导出默认值{
名称：“应用程序”，
组件：{MainHeader，OppForm}，
数据（）{
返回{
莫代尔：错，
};
},
方法：{
changeModal（newValueModal）{
this.modal=newValueModal；
},
},
};

客户端/组件/MainHeader.vue

<template>
    <div id="main_header_wrap">
        <header>
            <button v-on:click="showOppForm">Add Post</button>
        </header>

        <div>{{ modalVisability }}</div>
    </div>
</template>

<script>
    export default {
        props: {
            modalVisability: Boolean
        },
        methods: {
            showOppForm() {
                this.modalVisability = true;
                this.$emit('showModal', this.modalVisability);
            }
        },
    }
</script>

添加帖子
MainHeader={{modalVisability}}
导出默认值{
道具：{
可修改性：布尔，
},
方法：{
showOppForm（）{
this.emit（'showModal'，！this.modalviability）；
},
},
};

client/src/components/oppForm.vue

<template>
    <div id="opp_form" >
        <form @submit.prevent="SubmitOpp" v-if="modalVisability">
            <input type="text" name="company_name" v-model="company_name">
            <button type="submit">Submit</button>
        </form>

        <div>{{ modalVisability }}</div>
    </div>
</template>

<script>
    import axios from 'axios';

    export default {
        name: 'oppForm',
        props: {
            modalVisability: Boolean,
        },
        data() {
            return {
                company_name: ''
            }
        },
        methods: {
            SubmitOpp() {
                axios.post('http://localhost:5000/', {
                    company_name: this.company_name,
                })
                .then(function (response) {
                    console.log(response);
                })
                .catch(function (error) {
                    console.log(error);
                });
            }
        }
    }
</script>

提交
oppForm={{modalvability}}
从“axios”导入axios；
导出默认值{
名称：'oppForm'，
道具：{
可修改性：布尔，
},
数据（）{
返回{
公司名称：''，
};
},
方法：{
submitop（）{
axios
.post（'http://localhost:5000/', {
公司名称：this.company\u name，
})
.然后（功能（响应）{
控制台日志（响应）；
})
.catch（函数（错误）{
console.log（错误）；
});
},
},
};

1-App.js：在

MainHeader

组件中侦听事件

2-App.js:

OppForm

不需要监听事件，因为此组件不更改

模式值

3-MainHeader.vue：避免更改道具值。
尝试使用
@showModal
而不是
v-on:showModal
尝试添加类似
v-on:showModal=“show”
和
方法的处理程序：{show（e）{this.modal=e；}
谢谢。如果你不介意的话，我想问你几个问题。您是否总是必须侦听调用它的组件上的事件？从emit返回的值是否自动传递到changemodel函数中？还感谢第3点。我想知道如何修复该错误
o您必须始终侦听调用它的组件上的事件？
回答：是
并且从emit返回的值是否自动传递到changemodel函数中？
回答：是