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

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)

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