子到父事件发出答案

【问题标题】：child to parent event emit子到父事件发出
【发布时间】：2019-11-21 14:12:38
【问题描述】：

编写了一个代码来从子级向父级发出和接收事件，但不是接收事件而是显示其他内容

function (event) {
  var vm = this;
  if (true) {
    var lowerCaseEvent = event.toLowerCase();
    if (lowerCaseEvent !== event && vm._events[lowerCaseEvent]) {
      tip("Event \"" + lowerCaseEvent + "\" is emitted in component " + (formatComponentName(vm)) + " but the handler is registered for \"" + event + "\". " +
        "Note that HTML attributes are case-insensitive and you cannot use " + "v-on to listen to camelCase events when using in-DOM templates. " + "You should probably use \"" + (hyphenate(event)) + "\" instead of \"" + event + "\".");
    }
  }
  var cbs = vm._events[event];
  if (cbs) {
    cbs = cbs.length > 1 ? toArray(cbs) : cbs;
    var args = toArray(arguments, 1);
    var info = "event handler for \"" + event + "\"";
    for (var i = 0, l = cbs.length; i < l; i++) {
      invokeWithErrorHandling(cbs[i], vm, args, vm, info);
    }
  }
  return vm
}

在线检查所有代码是否相同

<template>
  <div id="app">
    <p>{{name}}</p>
    <Login v-on:datam="update($emit)"></Login>
  </div>
</template>

import Login from './views/Login.vue'

export default {
  name: 'app',
  components: {
    Login
  },
  methods: {
    update: function (ok1) {
      this.name = ok1;
    }
  }
}

【问题讨论】：

请确保正确格式化您的代码，尝试在 Playground 中发布您的父组件和子组件，如下所示：jsfiddle.net/Le5zw6av/1

标签： vue.js vue-component vue-router

【解决方案1】：

您可以使用外部事件文件发出事件。因此它可以访问您的所有组件。

首先我们应该创建一个文件。命名 event.js

import Vue from 'vue';

export default new Vue({
    data: {

    }
});

之后，您应该将该 event.js 导入到您的组件中

import Event from "../event.js";

然后你可以像下面这样在你的组件上发出一个事件

methods() {
  function yourMethod(){
    Event.$emit("fetchdata");
  }
}

在您的其他组件中，mounted 属性应如下所示：

mounted() {
  Event.$on("fetchdata", group => {
    this.fetchData();
 });
},
methods() {
  function fetchData() {
     console.log('hoooray :)');
  }
},

【讨论】：