关于vue.js:vue2-子组件方法向父组件方法传递子组件调父组件方法父组件调用子组件方法

35次阅读

共计 668 个字符,预计需要花费 2 分钟才能阅读完成。

一:子组件通过 this.$emit() 向父组件传递数据
1. 在父组件中应用子组件

<media-extra-info 
ref="mediaExtraInfoRef"   
@handleChildMediaChange="handleChildMediaChange"
/>

2. 在父组件中定义 handleChildMediaChange 办法

handleChildMediaChange(filter_key, filter_val){//doing}

3. 在子组件中应用

handleChildMediaChange(val){this.$emit("handleChildMediaChange", "child_media_id", val)
      },

二:子组件调用父组件中定义的 method 办法
this.$parent.parentMethod(params)

三:父组件调用子组件中定义的 method 办法, 通过 this.$refs 调用
1. 在父组件中引入子组件,并应用 ref 给子组件占位命名 ”mediaExtraInfoRef”

<media-extra-info 
ref="mediaExtraInfoRef"   
@handleChildMediaChange="handleChildMediaChange"
/>

2. 在子组件中定义一个 getVal 办法

 getVal(){let result = {}
        //doing 
        return result
      },

3. 在父组件中须要调用的中央调用子组件的 getVal() 办法

this.$refs.mediaExtraInfoRef.getVal()

正文完
 0