019_Vue子组件向父组件传值
生活随笔
收集整理的這篇文章主要介紹了
019_Vue子组件向父组件传值
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
1. 父組件向子組件傳遞信息
1.1. props傳遞數據原則: 單向數據流。
1.2. 子組件通過自定義事件向父組件傳遞信息
<button @click='$emit("enlarge-text")'>擴大父組件中字體大小</button>1.3. 父組件監聽子組件的事件?
<menu-item :arr='parr' @enlarge-text='handle'></menu-item>methods: {handle: function(){} }1.4. 代碼
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>父組件向子組件傳遞信息</title></head><body><div id="app"><div :style='{fontSize: psize + "px"}'>{{pmsg}}</div><menu-item :arr='parr' @enlarge-text='handle'></menu-item></div><script type="text/javascript" src="vue.min.js"></script><script type="text/javascript">Vue.component('menu-item', {props: ['arr'],template: `<div><ul><li :key='index' v-for='(item,index) in arr'>{{item}}</li></ul><button @click='$emit("enlarge-text")'>擴大父組件中字體大小</button></div>`});var vm = new Vue({el: "#app",data: {pmsg: '父組件中內容',parr: ["JavaScript DOM編程藝術", "高性能JavaScript", "javascript高級程序設計"],psize: 10},methods: {handle: function(){// 擴大字體大小this.psize += 5;}}});</script></body> </html>1.5. 效果圖
1.6. 點擊擴大父組件中字體大小按鈕?
2. 父組件向子組件傳值
2.1. 子組件通過自定義事件向父組件傳值
<button @click='$emit("enlarge-text", 5)'>擴大父組件中字體大小</button>2.2. 父組件監聽子組件的事件
<menu-item :arr='parr' @enlarge-text='handle($event)'></menu-item>methods: {handle: function(val){} }2.3. 代碼
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>子組件向父組件傳值</title></head><body><div id="app"><div :style='{fontSize: psize + "px"}'>{{pmsg}}</div><menu-item :arr='parr' @enlarge-text='handle($event)'></menu-item></div><script type="text/javascript" src="vue.min.js"></script><script type="text/javascript">Vue.component('menu-item', {props: ['arr'],template: `<div><ul><li :key='index' v-for='(item,index) in arr'>{{item}}</li></ul><button @click='$emit("enlarge-text", 5)'>擴大父組件中字體大小</button><button @click='$emit("enlarge-text", -5)'>縮小父組件中字體大小</button></div>`});var vm = new Vue({el: "#app",data: {pmsg: '父組件中內容',parr: ["JavaScript DOM編程藝術", "高性能JavaScript", "javascript高級程序設計"],psize: 10},methods: {handle: function(val){this.psize += val;}}});</script></body> </html>2.4. 效果圖
2.5. 點擊擴大父組件中字體大小按鈕?
2.6. 點擊縮小父組件中字體大小按鈕?
《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀總結
以上是生活随笔為你收集整理的019_Vue子组件向父组件传值的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 017_Vue组件
- 下一篇： 020_Vue非父子组件之间数据交互