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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • BN层详解_罗盘第一层详解

    BN层详解_罗盘第一层详解批量归一化(BN:BatchNormalization:解决在训练过程中,中间层数据分布发生改变的问题,以防止梯度消失或爆炸、加快训练速度)1、为什么输入数据需要归一化(NormalizedData)?归一化后有什么好处呢?原因在于神经网络学习过程本质就是为了学习数据分布,一旦训练数据与测试数据的分布不同,那么网络的泛化能力也大大降低;另外一方面,一旦每批训练数据的分布各不相同(batch梯度下降),那么网络就要在每次迭代都去学习适应不同的分布,这样将会大大降低网络的训练速度,…

    2022年10月15日
    3
  • Lock锁——-tryLock()方法

    Lock锁——-tryLock()方法这一次主要学习Lock接口中的**tryLock()**方法。tryLock()方法是有返回值的,返回值是Boolean类型。它表示的是用来尝试获取锁:成功获取则返回true;获取失败则返回false,这个方法无论如何都会立即返回。不会像synchronized一样,一个线程获取锁之后,其他锁只能等待那个线程释放之后才能有获取锁的机会。一般情况下的tryLock获取锁匙这样使用的://实例化…

    2022年10月16日
    4
  • NFS固定端口配置

    NFS固定端口配置NFS固定端口的配置一、环境介绍二、配置步骤1、安装nfs工具2、创建共享目录3、修改nfs配置文件,指定固定的端口4、重启相关服务并检查相应端口是否存在一、环境介绍1、内网环境,使用NFS作为存储;2、需开通工作节点服务器访问存储服务器的NFS的网络策略,所以需要将端口固定;二、配置步骤1、安装nfs工具yuminstall-yrpcbindnfs-utils2、创建共享目录mkdir/data/hoschmod777/data/hos/编辑/etc/exports

    2022年6月27日
    72
  • TC_P_Windows 安裝Eclipse

    TC_P_Windows 安裝Eclipse

    2021年8月6日
    55
  • java集合详解_通俗易懂java集合

    java集合详解_通俗易懂java集合ArrayDequeArrayDeque是Deque接口的一个实现,使用了可变数组,所以没有容量上的限制。同时,ArrayDeque是线程不安全的,在没有外部同步的情况下,不能再多线程环境下使用。ArrayDeque是Deque的实现类,可以作为栈来使用,效率高于Stack;也可以作为队列来使用,效率高于LinkedList。需要注意的是,ArrayDeque不支持null值。ArrayDeque初识说明书和继承关系还是按照国际惯例,先看一下ArrayDeque的说明书,其实往往很多时候你的困

    2022年9月20日
    3
  • EC20开发流程[通俗易懂]

    EC20开发流程[通俗易懂]EC20开发流程一、环境二、编译工具的使用三、准备工作四、编写代码五、烧录程序一、环境1、虚拟机ubuntu16.042、ql-ol-sdk对应的编译工具二、编译工具的使用1、将ql-ol-sdk.tar压缩包解压到虚拟机中的路径(最好是U盘挂载后,直接从U盘中解压过去),之后再在终端中ql-ol-sdk/ql-ol-crosstool$sourceql-ol-crosstool-e…

    2025年8月18日
    4

发表回复

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

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