我似乎记得通过<template>在相应子组件的开始标记中指定发出的事件，能够从父组件向子组件发出事件。但是由于某种原因，它不再适用于我的实现。我是妄想还是这可能是旧版本中VueJS已弃用的功能，可能代替事件总线架构？我目前正在使用Vue v2.6.12.
在我的 $root vue 实例中：
var app = new Vue({
el: '#app',
router,
data: () => ({}),
methods: {
clearForm() {
this.$emit('clear-form');
}
}
});
Laravel 布局：
<v-main>
@yield('content')
</v-main>
路由器/Laravel 视图/vue：
@extends('layouts.user')
@section('content')
<transition name="slide">
<router-view></router-view>
</transition>
@endsection
当clearForm()在 $root 实例中被调用时，我不应该能够像这样在子组件中捕获发出的事件......
<template @clear-form="clearForm"></template>
<script>
export default {
data() {
},
created() {
this.$on('clearForm', clearForm);
},
methods: {
clearForm() {
//this is the method i want to call when emitted from $root
}
}
}
</script>
更新：
我从@JoshuaAngnoe 中选择的答案是将发出的事件从 a 传递$root Vue instance到通过Vue-Router. 然而，就我而言，我也利用了Laravel框架，这增加了额外的复杂性，因为 HTML 被分解为两个文件（布局和视图）。
Laravel包含<router-view>元素的视图与Laravel布局分开，布局实际上与 $root Vue 实例位于同一层。所以需要一个额外的步骤来使它工作......
发出的事件的声明，在所选的答案中，驻留在<router-view>元素中：<router-view @clear-form="clearForm" />需要移出<router-view>元素，并进入子组件的开始模板标记：<template @clear-form="clearForm">。
我最初的例子的结构是正确的。$root当我调用$on从子组件捕获发出的事件时，我只是失踪了。
created() {
this.$on('clearForm', clearForm);
}
需要是：
created() {
this.$root.$on('clearForm', clearForm);
}
我是妄想还是这可能是旧版本的 VueJS 中已弃用的功能，
不，您没有错觉，如果我没记错的话，这在 Vue 1 中是可能的。
正如您所指出的，您正在使用 Vue Router，路由组件可能会负责触发 clear-form 事件，并且您希望您的应用程序对此做出响应。这可以通过传递一些侦听器来实现<router-view></router-view>，就像这样<router-view @clear-form="clearForm()"></router-view>
一个例子：
<div id="app">
<h1>
Hello
</h1>
<router-view @clear-form="clearForm"></router-view>
</div>
Vue.use(VueRouter)
new Vue({
el: '#app',
router: new VueRouter({
routes: [
{ path: '/', component: { template: `
<div>
Some page component
<button @click="$emit('clear-form')">Clear form</button>
</div>
`} }
]
}),
methods: {
clearForm() {
alert("Clearing form")
}
}
});
现在子组件（路由组件）可以向 App 实例发送应该清除表单的信号。
jsfiddle 中的一个工作示例：https ://jsfiddle.net/zkfu8x5s/3/
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句