Question

编写了一个代码以从子级向父级发送和接收事件，但它没有显示事件，而是显示了其他内容

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

Answer 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() {
  Event.$on("fetchdata", group => {
    this.fetchData();
 });
},
methods() {
  function fetchData() {
     console.log('hoooray :)');
  }
},

子事件到父事件

1 个答案: