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

以下内容只是我个人学习时的记录,可能与实际有偏差,大佬勿怪

1传值(父传子)
父组件给子组件传值 借助 props

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

父组件

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


子组件

2传值(子传父)
子组件给父组件传值,通过 $emit

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


父组件

父组件接收方

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


子组件

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

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


父组件

父组件

你可能感兴趣的:(vue 子父组件相互调用的方法 2018-11-09)