Vue3警告:[Vue warn]: Extraneous non-emits event listeners (changeParentProps) were passed to component

news/2024/7/9 23:39:10 标签: Vue3, vue, 组件通信

Vue3组件通信中(子传父)报出如下警告:

[Vue warn]: Extraneous non-emits event listeners (changeParentProps) were passed to component but could not be automatically inherited because component renders fragment or text root nodes. If the listener is intended to be a component custom event listener only, declare it using the “emits” option.

解决方法:声明下自定义事件名称即可

emits: [‘changeParentProps’]

<template>
  <div>
    子组件
  </div>
  <button @click="changeParentProps">更改父组件传过来的props</button>
</template>
<script lang="ts">
import { defineComponent } from '@vue/composition-api'
export default defineComponent({
  emits: ['changeParentProps'],
  props: {
    data: {
      type: String,
      default: ''
    }
  },
  setup (props, { emit }) {
    // console.log(props)
    const changeParentProps = () => {
      emit('changeParentProps', '123')
    }
    return {
      changeParentProps
    }
  }
})
</script>

http://www.niftyadmin.cn/n/1143434.html

相关文章

手撕Promise和Async await原理

Promise原理&#xff1a; const PENDING pending; const FULFILLED fulfilled; const REJECTED rejected;class MyPromise { status PENDING; // 状态一经改变就不可变value null;reason null;successCallback null;failCallback null;constructor(executor) {this.re…

大三实训,我用Nodejs和Vue3以及Typescript做了一个关于医院的后台管理系统 ❥(^_-)

已经大概有一个多月没有写博客了&#xff0c;最近一直在准备考研&#xff0c;所以时间有些紧张&#xff0c;今天特意拿出一下午时间来回忆回忆前端知识。今天就拿我在6月份所实训的后台管理项目来说一说。毕竟离上次写前端代码已经有很长时间了&#xff0c;有点想念啊~~~哈哈哈…

手撕Vue2和Vue3响应式原理

object.defineProperty缺陷&#xff1a; 1、通过数组下标添加元素&#xff0c;无法触发setter。 2、监听数组的push,pop,shift,unshift,splice,sort,reverse方法或者改变length无法触发setter。—>重写数组方法 3、无法检测到对象属性的新增或删除 —>Vue.$set 4、不管da…

Scrapy框架的安装和简单使用

Scrapy框架的安装和简单使用Scrapy框架的安装和简单使用前言一、环境准备二、安装步骤1.安装相关库三、创建和简单介绍总结Scrapy框架的安装和简单使用 提示&#xff1a;这里可以添加系列文章的所有文章的目录&#xff0c;目录需要自己手动添加 例如&#xff1a;第一章 Python…

python关于pip的常见命令汇总

python关于pip的常见命令 文章目录python关于pip的常见命令前言1.查看pip2.where pip3.安装库(1)直接安装(2)接入国内的信任源(3)先下载到本地&#xff0c;然后在通过本地安装4.pip的相关操作命令及对库的批量操作命令(1)查看pip的版本信息(2)pip更新版本(3)pip回退版本(4)查看…

Python 网络爬虫:爬取4K高清美图

爬取4K高清美图 这篇爬虫主要是用来爬取网站高清4K图片&#xff0c;这也是笔者学初学爬虫的时候最先写一个的爬虫脚本&#xff0c;现在回过头来重新梳理一下&#xff0c;也算是对从前知识的一个总结&#xff0c;希望对大家有所帮助&#xff01; 文章目录爬取4K高清美图1、分析…

将的脚本程序打包成一个exe可执行程序

将的脚本程序打包成一个exe可执行程序 文章目录将的脚本程序打包成一个exe可执行程序前言1.引入库2.具体使用&#xff08;1&#xff09;准备工作&#xff1a;&#xff08;2&#xff09;打包程序&#xff1a;补充总结前言 最近经常在空闲的时候写一些简单的小工具&#xff0c;正…