vue子组件调用父组件的方法

Posted 2023-04-17

参考技术A

一开始感觉调用方法应该和react差不多，父组件传入子组件，子组件调用就行了。但感觉应该还有其他方法，于是将这些方法记录下。

父组件中引用子组件:

子组件中写法：

一定要在 props 里声明 setBillDetail 函数，不然 setBillDetail 始终为 undefined !!!
初学 vue ，自己就踩了个大坑，忘记在 props 里加了。

父组件:

子组件:

这样写，编译会通过，但 eslint 会给出 error ：

子组件：

总之，记住一句话： html 中的 attribute 名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符，更推荐 kebab-case 。

此处举例省略。

参考：
Vue子组件调用父组件的方法

vue 子父组件相互调用的方法 2018-11-09

参考技术A 以下内容只是我个人学习时的记录，可能与实际有偏差，大佬勿怪

1传值（父传子）
父组件给子组件传值 借助 props

父组件：
传一个叫做 put_child 的变量给子组件

子组件：
子组件在 props 中定义接受的变量，然后就能使用

2传值（子传父）
子组件给父组件传值，通过 $emit

父组件：
在父组件中绑定一个属性,同时定义一个方法接受，子组件发送过来的数据

子组件：
调用 $emit 传给父组件上绑定的属性，剩下的就是父组件处理了

3.调用方法(子调父)
目前只掌握了，同$emit传值给父一样,同上这里就不写出了

4.调用方法(父用子)
父组件：
在父组件中 ref 属性 定义一个变量，当我使用 this.$refs.变量 会把子组件对象返回，这样我们就可以调用子组件的方法