这是笔者在学习过程中为了增强对相关知识的掌握而记录的笔记,如果有幸帮到您笔者将十分开心。
笔者将子组件向父组件传值分为了两种情况:
区别是前者的触发条件在子组件内,而后者的触发条件在父组件里。
展示页面的效果如下所示:
在子组件内可以通过$emit('function', param)将数据发送出去。
$emit一共接收两个参数,其中function为定义在父组件中、由子组件触发的函数;param为子组件发送的数据。
子组件的代码如下:
This is child component
子组件中的按钮
笔者给el-button绑定了一个点击事件sendMessage()。当按钮被点击时,子组件将会通过$emit向父组件发送function: 'transmit'和param: 'this.data'两个参数。
父组件的代码如下:
This is parent component
原神 {{ message }}
父组件中的按钮
在父组件导入的子组件中通过@transmit监听子组件传入的数据(transmit就是子组件$emit定义的参数function)。transmit对应的函数getMessage(data)的参数data即为子组件传入的数据。
点击“子组件中的按钮”后的效果如下所示:
(原始人认为,宇宙万法的那个源头,它是什么?它是原~原~对吧,所以,原神--启动!)
除了将$emit写在methods里,还可以像
并且,虽然在示例中传入了两个参数,但$emit也可以只传function这一个参数。如果需要在触发事件时附带一个特定的值,便需要再传入一个额外的参数param。
有些时候可能我们需要点击父组件的按钮来获取子组件的数据,因此便有了情景二。
在父组件中,可以通过给子组件绑定ref来获取子组件的数据。
父组件代码(省略了css):
This is parent component
原神 {{ message }}
父组件中的按钮
首先给el-button绑定点击事件showMessage(),给子组件绑定ref='childRef'。当点击“父组件中的按钮”时,子组件的game被赋值给父组件的message。实现的效果与情景一一样,便不展示了。
$refs除了可以获取子组件的数据,还可以获取子组件的方法。先在子组件中定义如下方法:
然后在父组件的点击事件中通过$refs调用:this.$refs.childRef.notice()。效果如下所示:
当然,如果子组件的方法return了返回值,也能通过$refs获取到。还是notice方法里,返回了字符串'oo',然后在父组件里console.log(this.$refs.childRef.notice())。可以在右侧的控制台上看到已经打印出'oo'。因此,父组件也可以采取此方式获取子组件的数据。
其实也能通过$refs调用子组件的$emit来获取数据(父组件让子组件给自己发送数据),核心思路就是this.$refs.child.function,子组件child的function里包含$emit。笔者就不展示啦。
最后,如果这边文章帮到您,不妨点一个小小的赞如果文章有误也恳请指正,阿里嘎多~