持续创作,加速成长!这是我参与「掘金日新计划 · 10 月更文挑战」的第8天,点击查看活动详情juejin.cn/post/714765…
- 子向父传值实现起来比较简单。
- 给大家先解释一下,然后再上代码看一看。
- 很多时候,我们不仅需要由父向子传值,还需要子向父传值。带大家复习一下react中子向父传值。react中再父组件中定义一个方法,把该方法接收一个参数,就是子组件向父组件传过来得数据。把该函数作为子组件得属性传过去,当做某一个事件时,可以调用该属性,并往该属性里传数据,该数据就作为了父组件刚刚创建好得函数的参数,这样父组件就得到了子组件传过来的数据。
- 那么再vue中,操作子向父传值,可以在子组件中定义一个事件,这个事件中改变data中的数据,改变完之后,通过vue对象的$emit方法把数据传过去。下面上代码:
调用$emit方法时,第一个参数依然是自定义的事件名,第二个参数为data中要传递出的数据。
- 上面这张图是父组件,子向父传值自定义的事件要写在父组件中,写法和vue中定义事件是一样的写法,fs就是我们自定义的事件名,changefs就是事件函数,参数ize就是接收的数据,可以直接在父组件中进行使用。
- react和vue比较的话,react感觉逻辑会更清楚一些,vue里面把自定义事件名与事件体进行了分开,有些时候可能会找不到事件,这一点在写代码的时候需要更细心一些,时刻注意,否则容易出错。