Question

我想将事件从“家庭”组件发送到“关于”组件。但这会引发此异常-“ TypeError：无法读取未定义的属性'$ emit'”。

这是我的“ main.js”

import Vue from "vue";
import App from "./App.vue";
import router from "./router";

export const bus = new Vue();
Vue.config.productionTip = false;

new Vue({
  router,
  render: h => h(App)
}).$mount("#app");

这是我的“主页”组件。

<template>
  <div class="home">
    <input
      v-model="text"
      class="text-input"
      placeholder="Add text to your child component"
    />
    <button @click="sendmsg" class="btn-add">Add message</button>
  </div>
</template>

<script>
import { bus } from "../main";

export default {
  name: "home",
  data() {
    return {
      text: "",
    };
  },
  methods: {
    sendmsg() {
      bus.$emit("msg", this.text);
      this.text = "";
    }
  }
};
</script>

这个“关于”组件

<template>
  <div class="about"></div>
</template>

<script>
import { bus } from "../main";
export default {
  name: "about",
  created() {
    bus.$on("message", (data) => {
      console.log(data);
    });
  }
};
</script>

Answer 1

看起来像是由可能的循环依赖关系引起的竞争条件（ main -> App -> Home -> 主要）。

我建议将您的bus移至其自己的模块，而不要移至main。有关示例，请参见here

// src/event-bus.js
import Vue from 'vue'
export default new Vue()

，然后在Home.vue和About.vue

import bus from '@/event-bus'

此外，您的About组件正在侦听错误的事件。 Home发出“ msg” ，但是About监听“ message” 。他们应该使用相同的事件名称。

演示〜https://codesandbox.io/s/serverless-frog-kvtoj?file=/src/event-bus.js

Answer 2

它正在工作，但是一旦组件有自己的视图，它就会停止工作。

App.vue

<template>
  <div class="app">
    <router-link to="/"> HOME</router-link>
    <router-link to="/about"> About</router-link>
    <router-view />
  </div>
</template>

<style lang="scss">
.app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  align-items: center;
  .btn-add {
    width: 10vw;
  }
  .text-input {
    width: 10vw;
  }
}
</style>

index.js

import Vue from "vue";
import VueRouter from "vue-router";
import Home from "../views/Home.vue";

Vue.use(VueRouter);

const routes = [
  {
    path: "/",
    name: "Home",
    component: Home
  },
  {
    path: "/about",
    name: "About",
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/About.vue")
  }
];

const router = new VueRouter({
  mode: "history",
  base: process.env.BASE_URL,
  routes
});

export default router;

“” TypeError：无法读取未定义vue的属性'$ emit'

2 个答案: