知识改变命运! vue3报错:Uncaught TypeError: this.$refs.demo.$on is not a function_newnew-lskyf博客社区

vue3报错:Uncaught TypeError: this.$refs.demo.$on is not a function

newnew 8月前 ⋅ 1384 阅读 ⋅ 0 个赞

错误

Uncaught TypeError: this.$refs.demo.$on is not a function

原因

Vue 3 中,$on 方法已经被移除,可能需要使用 addEventListener 方法替代。

错误代码

错误关键代码是: this.$refs.demo.$on("customEvent", this.getChildMsg);

<template>
  <div class="container">
    <h1>我是APP组件</h1>
    <h2>{{ msg }}</h2>
    <Demo ref="demo"></Demo>
  </div>
</template>

import Demo from "./components/Demo.vue";
export default {
  name: "APP",
  components: {
    Demo,
  },
  data() {
    return {
      msg: "",
    };
  },
  mounted() {
    this.$refs.demo.$on("customEvent", this.getChildMsg);
  },
  methods: {
    getChildMsg(childMsg) {
      console.info(childMsg);
      this.msg = childMsg;
    },
  },
};


正确代码

正确关键代码是:addEventListener('customEvent', getChildMsg);

<template>
  <div class="container">
    <h1>我是APP组件</h1>
    <h2>{{ msg }}</h2>
    <Demo ref="demo" @customEvent="getChildMsg"></Demo>
  </div>
</template>


import { ref } from "vue";
import Demo from "./components/Demo.vue";

export default {
  name: "APP",
  components: {
    Demo,
  },
  setup(){
    let msg=ref("")
    function getChildMsg(chilMsg){
      console.log(chilMsg);
      msg.value=chilMsg
    }
	//关键代码
    const demo=ref(null)
    addEventListener('customEvent', getChildMsg);
    return{
      demo,getChildMsg,msg
    }
  }
};



全部评论: 0

    我有话说:

    微信小程序request:fail url not in domain list

    微信小程序request:fail url not in domain list 登录小程序后台 https://mp.weixin.qq.com/ 选择开发--开发设置--服务器域名--服务器

    win10升级后vitrulbox虚拟机启动:Failed to open/create the internal network 'HostInterfaceNetworking

    win10升级后虚拟机启动: Failed to open/create the internal network 'HostInterfaceNetworking-VirtualBox

    vue.esm.js?efeb:591 [Vue warn]: Error in mounted hook:

    : PubSub is not defined" **...

    stable duffusion NansException: A tensor with all NaNs was produced in Unet. This could be either

    这个错误是什么问题? 运行stable duffusion出现这个错误 NansException: A tensor with all NaNs was produced in Unet

    VUE如何关闭Eslint 的方法

    就是一直。强迫症没有办法。所以大家安装的时候...

    jenkins 执行maven命令 Caused by: java.io.FileNotFoundException: /var/jenkins_home/jdk/lib/tzdb.dat

    执行jenkins使用maven命令打包的时候: Caused by: java.io.FileNotFoundException: /var/jenkins_home/jdk/lib/tzdb

    Stable Diffusion|安装过程中常见解决方法

    转自:https://openai.wiki/stable-diffusion-error.html 如何查看 在你安装时可能经常遇到各种各样的问题,但是对于一堆陌生的英文和各种各样的错误,大家

    thymeleaf onclick传值到function

    thymeleaf onclick传值到function 使用[[]] 例如: <span th:onclick="app.test([[${an.id}]])"/>测试click传值

    spring boot项目本地没问题,部署到服务器mysql:errorCode 0, state 08S01

    错误现象: 在开发的时候没有,能正常运行并且能连接服务器。但是部署到服务器。 错误如下: 2023-04-07 11:54:40.617 ERROR 7 --- [reate

    Caused by: java. io.I0Exception:The

    Caused by: java. io.I0Exception:The"/xxxx/xxx" 检查建议: 1. 确保服务器目录和部署的服务是同一台机器 2. 确保此目录针对tomcat有访问

    kubeshere部署devops-java-sample404

    1.错误日志 Starting Kubernetes deployment Loading configuration: /home/jenkins/agent/workspace/demo

    springboot项目运行在docker中 file.exists()返回false没有

      springboot项目运行在docker中 file.exists()返回false没有   表现:在windows运行正确,但是打包后运行在docker容器中找不到

    chrome 离线扩展程序安装 程序包无效:"CRX_HEADER_INVALID"

    安装chrome离线扩展程序时候:程序包无效:"CRX_HEADER_INVALID"导致crx扩展程序无法正常安装。 怎么办呢? 解决方法:将crx文件后缀.crx改为.zip然后重新拖进

    Module build failed: Error: Cannot find module 'node-sass'

    前言: 今天给vue安装pubsub-js(安装使用参考https://www.npmjs.com/package/pubsub-js)后,npm run dev 如下错误: Module

    mysql function生成指定位数且不重复数字

    1.生成指定位数且不重复数字 2.函数结构 CREATE DEFINER=`root`@`%` FUNCTION `fun_sn`(number BIGINT) RETURNS bigint(20

    加入公众号
    加入公众号