vue 调用子组件方法失败_Vue子组件调用父组件的方法及常见问题「建议收藏」

vue 调用子组件方法失败_Vue子组件调用父组件的方法及常见问题「建议收藏」1.子组件内不允许直接修改父组件传过来的参数。错误实例:子组件代码直接对data参数进行修改,则会提示错误。vue.runtime.esm.js?2b0e:619[Vuewarn]:Avoidmutatingapropdirectlysincethevaluewillbeoverwrittenwhenevertheparentcomponentre-render…

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

1.子组件内不允许直接修改父组件传过来的参数。

错误实例:

子组件代码

直接对data参数进行修改,则会提示错误。

vue.runtime.esm.js?2b0e:619 [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop’s value. Prop being mutated: “data”

避免直接改变属性,因为每当父组件重新渲染时,该值都将被覆盖。相反,请使用基于属性值的数据或计算属性。道具正在变异:“数据”

2.正确方式,通过$emit实现。

方式1:在子组件内调用emit方法来更新data对象,可以配合watch使用,即子组件内值发送变化,则通知父组件数据进行更新。data为父组件通过props传入的参数对象,

this.$emit(‘update:data’,‘hello’ );

方式2:在父组件定义回调函数,

父组件向子组件内传递数据时,第一次传递失败,第二次才会正常传递。

(第一次无法将configData传递到子组件 )

原因:

父组件初始化时直接加载子组件,此时该configData对象值为空。

解决方法:

动态控制加载子组件

错误描述:

业务场景:组件之前项目引用,如A组件引用B组件,B组件引用A组件,

控制台出现 : did you register the component correctly? For recursive components, make sure to provide the “name” option.

解决方法:在main.js文件将A,B组件引入。

import isNotice from ‘@/components/home/notice’

Vue.component(‘isNotice’, isNotice)

用上面的方法全局引入组件就可以解决循环引用组件报错的问题。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/186641.html原文链接:https://javaforall.net

(0)
上一篇 2022年10月2日 下午8:00
下一篇 2022年10月2日 下午8:16


相关推荐

  • 曼哈顿距离和切比雪夫距离

    曼哈顿距离和切比雪夫距离转载 nbsp https www cnblogs com zwfymqz p 8253530 html 本文只讨论二维空间中的曼哈顿距离与切比雪夫距离曼哈顿距离定义设平面空间内存在两点 它们的坐标为 x1 y1 x2 y2 则 nbsp nbsp 即两点横纵坐标差之和 nbsp 两点在南北方向上的距离加上在东西方向上的距离煮个栗子如图所示 图中 A B 两点的曼哈顿距离为 AC B

    2026年3月19日
    2
  • webstorm2022.01激活码_最新在线免费激活[通俗易懂]

    (webstorm2022.01激活码)2021最新分享一个能用的的激活码出来,希望能帮到需要激活的朋友。目前这个是能用的,但是用的人多了之后也会失效,会不定时更新的,大家持续关注此网站~IntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,下面是详细链接哦~https://javaforall.net/100143.html…

    2022年3月31日
    1.1K
  • Jlink或者stlink用于SWD接口下载程序「建议收藏」

    Jlink或者stlink用于SWD接口下载程序「建议收藏」最近要使用stm32f103c8t6最小系统板,直接ISP串口下载程序太麻烦,就想着使用swd接口来调试。结果:通过SWD接口下载程序成功,但调试失败,还不知原因,会的的人麻烦交流一下。SWD接口:3.3VDIO(数据)CLK(时钟)GND1.首先声明jlink和stlink都有jtag和swd调试功能。jlink接口如下:如图,我使用的就是VCC…

    2022年4月25日
    64
  • 线性反馈移位寄存器LFSR verilog实现

    线性反馈移位寄存器LFSR verilog实现一 什么是 LFSR 线性反馈移位寄存器 linearfeedba LFSR 是指 给定前一状态的输出 将该输出的线性函数再用作输入的移位寄存器 异或运算是最常见的单比特线性函数 对寄存器的某些位进行异或操作后作为输入 再对寄存器中的各比特进行整体移位 百度百科定义 线性反馈移位寄存器反馈分为两种 一种是 IE 型的 LFSR 即异或门内接的线性反馈移位寄存器 另一种是异或门外接的线性反馈移位寄存器 简称 EE 型 LFSR gi 表示接不接入反馈 只能为 0 或 1 为 1 即为

    2026年3月19日
    2
  • 一文搞定BP神经网络——从原理到应用(原理篇)「建议收藏」

    一文搞定BP神经网络——从原理到应用(原理篇)「建议收藏」神经网络结构以及前向传播过程损失函数和代价函数反向传播1矩阵补充知识11矩阵求梯度12海塞矩阵13总结2矩阵乘积和对应元素相乘3反向传播原理四个基础等式4反向传播总结41单样本输入公式表42多样本输入公式表本文小结Hello,对于神经网络的原理,我入门了好多次,每次都觉得懂了,但是其实内部原理并没有理解透彻。经过不懈努力,终于茅塞顿开,遂总结此文。本

    2022年7月20日
    16
  • Android SwipeRefreshLayout 官方下拉刷新控件介绍

    Android SwipeRefreshLayout 官方下拉刷新控件介绍下面App基本都有下拉刷新的功能,以前基本do

    2022年6月25日
    31

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号