vue子组件传值给父组件_子组件调用父组件中的方法

大家好，又见面了，我是你们的朋友全栈君。

参考视频 ： https://www.bilibili.com/video/av32790541/?spm_id_from=trigger_reload

原理：

在父组件引用子组件时，通过事件绑定机制把一个方法aaaa的引用传给子组件，这个方法中可以有各种参数，子组件在触发自己的函数或者某些数据发生变化时，触发：事件绑定机制绑定的函数，通过参数的方式将要传的值传过来，父组件中处理，也就接到了子组件的值

最开始父组件本身有一个方法 ： fatherMethods

fatherMethods(){
    console.log('父组件的方法')    
}

vue子组件传值给父组件_子组件调用父组件中的方法

步骤①：在子组件被调用的标签中，绑定一个父组件方法的引用

父组件通过事件绑定机制，也就是

@sendSon="fatherMethods"

方式传值给子组件， 注意，这里是方法的引用，换句话就是把这个方法传递给子组件，而不是方法执行完以后的值，所以这里不能加括号

目的：把父组件的一个方法传给子组件

vue子组件传值给父组件_子组件调用父组件中的方法

步骤② 给子组件写一个引发事件

子组件中写一个事件会触发一个子组件本身的方法

@click="sonEdit()"
@change="sonEdit()"
@mouseover="sonEdit()"

vue子组件传值给父组件_子组件调用父组件中的方法

步骤③ 子组件触发这个引发事件

子组件本身的方法sonEdit，其中通过$emit操作父组件传过来的sendSon方法绑定的父组件的方法引用fatherMethods，这时就触发了父组件的方法

换句话说：子组件通过$emit出发了从父组件传过来的方法

sonEdit(){
    this.$emit('sendSon')
    }

vue子组件传值给父组件_子组件调用父组件中的方法

步骤④ 子组件在调用父组件时，传参数

真正的父组件中并没有调用这个show方法，只有传给的子组件中调用了，调用就可以传参数，那么就在子组件中触发时候传参数

vue子组件传值给父组件_子组件调用父组件中的方法

步骤⑤ 在调用的时候传参数

$emit在触发父组件传过来的值的时候，第一个参数是方法名，从第二个起，后面均可以传参数，

vue子组件传值给父组件_子组件调用父组件中的方法

show方法里面可以写的是对参数的一系列操作，也就变相完成了从子组件向父组件传值的需求

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