子到父事件发出

Posted 2023-02-22

【中文标题】子到父事件发出

【英文标题】：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

【参考方案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 :)');
  
,