組件之間的數據傳輸 · uniapp

> 組件之間的數據傳輸，以及事件傳遞是比較常見的一個應用 [TOC] ## 事件注冊/觸發方式 > 客戶端調用組件的時候，注冊事件 > 組件觸發注冊的事件，達到向父組件傳值的目的 ### 組件 free-test.vue ~~~ <template>  <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> ~~~