本文摘自PHP中文网,作者青灯夜游,侵删。
vue子组件向父组件传值的方法:1、子组件主动触发事件将数据传递给父组件。2、子组件中绑定ref,且定义一个父组件可直接调用的函数,父组件注册子组件后绑定ref,调用子组件的函数获取数据。
本教程操作环境:windows7系统、vue2.9.6版,DELL G3电脑。
一,子组件主动触发事件将数据传递给父组件
1,在子组件上绑定某个事件以及事件触发的函数
子组件代码
1 2 3 4 5 6 7 8 |
|
事件在子组件中触发的函数
1 2 3 |
|
2,在父组件中绑定触发事件
1 2 |
|
父组件触发函数显示子组件传递的数据
1 2 3 4 |
|
控制台打印的数据
相关阅读 >>
4个很 nice 的vue router过渡动效,快来收藏!
vue table 表格利用formatter属性格式化数据
更多相关阅读请进入《vue》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者