【Vue】父子组件参数互传

问题起因:

父组件内使用了子组件(component),而子组件内需要确认当前父组件点击或选择的是哪个元素。

解决方法:

一般来说子组件与父组件每个组件间的变量作用域是只限于本组件内的。Vue提供了方法让父子组件间可以互相传递参数。

父传子

想让父组件的变量传递给子组件,如下图,在父组件中使用子组件时增加一个v-bind绑定一个自定义的属性名,然后值为父组件中需要传递的参数。
deO5wT.png
子组件中,需要定义props属性,其中的值为在父组件中v-bind绑定的属性名。
deXw9J.png
经以上步骤后,子组件中需要使用时只需要按下面这样调用即可
dejMVK.png


子传父

当子组件需要向父组件传值回调时,只需要在子组件中使用$emit调用父组件绑定方法即可。
如下图,子组件去触发父组件的一个zchange事件,并传值123
devpzd.png
看看父组件中如何触发该事件以及获取参数值
dex03Q.png
首先定义了一个@zchange事件,然后触发方法zchange,参数写
$event(必要,这样才能获取正确值,\$event通常用来替代方法携带的默认参数)

比如说你想在一个框架自带的默认方法添加自己的自定义参数,方法定义的时候就可以写成下面这样

@selection-change="handleSelectionChange($event,“自定义参数”)

dexsun.png
然后在该方法内就能正常获取子组件传递过来的参数值。