> 组件之间的数据传输，以及事件传递是比较常见的一个应用 * [事件注册/触发方式](https://www.kancloud.cn/wangking/uniapp/1941561#_3) * [组件 free-test.vue](https://www.kancloud.cn/wangking/uniapp/1941561#_freetestvue_7) * [客户端调用](https://www.kancloud.cn/wangking/uniapp/1941561#_29) * [客户端调用组建引用方式](https://www.kancloud.cn/wangking/uniapp/1941561#_57) * [组件 free-test.vue](https://www.kancloud.cn/wangking/uniapp/1941561#_freetestvue_59) * [客户端调用](https://www.kancloud.cn/wangking/uniapp/1941561#_81) ## 事件注册/触发方式 > 客户端调用组件的时候，注册事件 > 组件触发注册的事件，达到向父组件传值的目的 ### 组件 free-test.vue ~~~ <template> <!-- <button type="default" @tap="$emit('openExtend')">{{title}}</button> --> <button type="default" @tap="seeme">{{title}}</button> </template> <script> export default { name:"freeTs", props:{ title : String, default:'' }, methods:{ seeme(){ this.$emit('openExtend', {name:'wk', 'sex':'male'}) } } } </script> ~~~ ### 客户端调用 > 调用组件时注册事件 ~~~ <template> <view> <free-test :title="title" @openExtend="openExtend"></free-test> </view> </template> <script> import freeTest from '../../components/free-test.vue' export default { components:{ freeTest }, data(){ return { title:'haha' } }, methods:{ openExtend(obj){ console.log(obj) } } } </script> ~~~ ## 客户端调用组建引用方式 > 客户端为调用的组件设置引用别名，就可以调用其方法进行传值 ### 组件 free-test.vue ~~~ <template> <button type="default">{{title}}</button> </template> <script> export default { name:"freeTs", props:{ title : String, default:'' }, methods:{ seeme(obj){ console.log(obj) } } } </script> ~~~ ### 客户端调用 > 客户端为组建设置引用别名，就可以调用其方法进行传值 ~~~ <template> <view> <free-test :title="title" ref="free"></free-test> <button type="default" @tap="seeData">test</button> </view> </template> <script> import freeTest from '../../components/free-test.vue' export default { components:{ freeTest }, data(){ return { title:'haha' } }, methods:{ seeData(){ this.$refs.free.seeme({title:'6666', created_at:'2020-09-19'}); } } } </script> ~~~