當前位置：
首頁 >
组件间数据交互——父组件向子组件传值（ props属性值类型） 子组件向父组件传值-携带参数 || 非父子组件间传值
發(fā)布時間：2025/4/16
14
豆豆
生活随笔
收集整理的這篇文章主要介紹了
组件间数据交互——父组件向子组件传值（ props属性值类型） 子组件向父组件传值-携带参数 || 非父子组件间传值
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
父組件向子組件傳值
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title> </head> <body><div id="app"><div>{{pmsg}}</div><menu-item :pstr='pstr' :pnum='12' :pboo='true' :parr='parr' :pobj='pobj'></menu-item></div><script type="text/javascript" src="js/vue.js"></script><script type="text/javascript">/*父組件向子組件傳值-props屬性值類型*/Vue.component('menu-item', {props: ['pstr','pnum','pboo','parr','pobj'],template: `<div><div>{{pstr}}</div><div>{{12 + pnum}}</div><div>{{typeof pboo}}</div><ul><li :key='index' v-for='(item,index) in parr'>{{item}}</li></ul><span>{{pobj.name}}</span><span>{{pobj.age}}</span></div></div>`});var vm = new Vue({el: '#app',data: {pmsg: '父組件中內容',pstr: 'hello',parr: ['apple','orange','banana'],pobj: {name: 'lisi',age: 12}}});</script> </body> </html>子組件向父組件傳值-基本用法
props傳遞數(shù)據(jù)原則：單向數(shù)據(jù)流
1. 子組件通過自定義事件向父組件傳遞信息
2. 父組件監(jiān)聽子組件的事件
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title> </head> <body><div id="app"><div :style='{fontSize: fontSize + "px"}'>{{pmsg}}</div><menu-item :parr='parr' @enlarge-text='handle'></menu-item></div><script type="text/javascript" src="js/vue.js"></script><script type="text/javascript">Vue.component('menu-item', {props: ['parr'],template: `<div><ul><li :key='index' v-for='(item,index) in parr'>{{item}}</li></ul><button @click='$emit("enlarge-text")'>擴大父組件中字體大小</button></div>`});var vm = new Vue({el: '#app',data: {pmsg: '父組件中內容',parr: ['apple','orange','banana'],fontSize: 10},methods: {handle: function(){// 擴大字體大小this.fontSize += 5;}}});</script> </body> </html>子組件向父組件傳值-攜帶參數(shù)
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title> </head> <body><div id="app"><div :style='{fontSize: fontSize + "px"}'>{{pmsg}}</div><menu-item :parr='parr' @enlarge-text='handle($event)'></menu-item></div><script type="text/javascript" src="js/vue.js"></script><script type="text/javascript">Vue.component('menu-item', {props: ['parr'],template: `<div><ul><li :key='index' v-for='(item,index) in parr'>{{item}}</li></ul><button @click='$emit("enlarge-text", 5)'>擴大父組件中字體大小5px</button><button @click='$emit("enlarge-text", 10)'>擴大父組件中字體大小10px</button></div>`});var vm = new Vue({el: '#app',data: {pmsg: '父組件中內容',parr: ['apple','orange','banana'],fontSize: 10},methods: {handle: function(val){// 擴大字體大小this.fontSize += val;}}});</script> </body> </html>非父子組件間傳值
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title> </head> <body><div id="app"><div>父組件</div><div><button @click='handle'>銷毀事件</button></div><test-tom></test-tom><test-jerry></test-jerry></div><script type="text/javascript" src="js/vue.js"></script><script type="text/javascript">/*兄弟組件之間數(shù)據(jù)傳遞*/// 提供事件中心var hub = new Vue();Vue.component('test-tom', {data: function(){return {num: 0}},template: `<div><div>TOM:{{num}}</div><div><button @click='handle'>點擊</button></div></div>`,methods: {handle: function(){hub.$emit('jerry-event', 2);}},mounted: function() {// 監(jiān)聽事件hub.$on('tom-event', (val) => {this.num += val;});}});Vue.component('test-jerry', {data: function(){return {num: 0}},template: `<div><div>JERRY:{{num}}</div><div><button @click='handle'>點擊</button></div></div>`,methods: {handle: function(){// 觸發(fā)兄弟組件的事件hub.$emit('tom-event', 1);}},mounted: function() {// 監(jiān)聽事件hub.$on('jerry-event', (val) => {this.num += val;});}});var vm = new Vue({el: '#app',data: {},methods: {handle: function(){hub.$off('tom-event');hub.$off('jerry-event');}}});</script> </body> </html>
?
總結
以上是生活随笔為你收集整理的组件间数据交互——父组件向子组件传值（ props属性值类型） 子组件向父组件传值-携带参数 || 非父子组件间传值的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 组件间数据交互||父组件向子组件传值-基
- 下一篇： 组件间数据交互——组件插槽的作用||具名