1、父子組件通信html
1. 父傳子經過prop通信vue
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>父傳子</title> 8 </head> 9 <body> 10 11 <div id="app"> 12 <!-- 此處用v-bin綁定了子組件child的name屬性，使其值是父組件中的data數組 --> 13 <child :name='childName'></child> 14 <!-- 經過父組件的按鈕出發點擊事件改變data數組，從而改變了子組件的數據 --> 15 <button @click='chgName'>父變子</button> 16 </div> 17 18 19 <script src="./vue.js"></script> 20 <script> 21 22 Vue.component('child',{ 23 // 定義props檢驗父組件改變數據是否符合props的規則 24 props:{ 25 // name表示數據名稱 26 name: { 27 // type是數組規定格式是字符串 28 type: String, 29 // 若是父組件沒有給name賦值，則使用默認值 30 default: '小三', 31 // 自定義驗證 32 validator: function(value){ 33 // 若是父組件傳入的props是字符串，切是男或者女，則返回true，不然報錯返回false 34 if(value === '男' || value === '女'){ 35 return true 36 }else{ 37 return false 38 } 39 } 40 } 41 }, 42 template: ` 43 <div> 44 性別： {{name}} 45 </div> 46 ` 47 }) 48 49 var vm = new Vue({ 50 el: "#app", 51 data() { 52 return { 53 childName: '男' 54 } 55 }, 56 methods: { 57 chgName:function(){ 58 // this.childName = '父組件改變了子組件的名字' // 此處會報錯，沒有傳入符合規定的props 59 this.childName = '女' 60 } 61 }, 62 }) 63 </script> 64 </body> 65 </html>
2. 子傳父經過自定義事件通信數組
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>子傳父</title> 8 </head> 9 <body> 10 <div id="app"> 11 12 13 <h1>{{name}}</h1> 14 <!-- 父組件註冊自定義事件chg，並綁定chufa方法，當chg事件觸發， 15 即執行chufa方法改變本身的數據，child爲子組件，但此時屬於父組件的一部分 --> 16 <child @chg='chufa'></child> 17 </div> 18 <script src="./vue.js"></script> 19 <script> 20 Vue.component('child',{ 21 template:` 22 <!-- 子組件註冊點擊事件， --> 23 <button @click='chgFather'>修改父級組件數據</button> 24 25 `, 26 methods: { 27 // 點擊子組件會調用根實例的$emit方法，觸發，父組件的自定義事件chg。再傳入須要修改的數據 28 chgFather: function() { 29 this.$emit('chg','子組件已通知父組件修改數據') 30 } 31 }, 32 }) 33 var vm = new Vue({ 34 el: '#app', 35 data() { 36 return { 37 name:'父組件' 38 } 39 }, 40 methods:{ 41 chufa: function(newName){ 42 this.name=newName, 43 console.log(this.name) 44 } 45 } 46 }) 47 </script> 48 </body> 49 </html>
3. 兄弟組件通信，經過中央管理器（Vue空實例）app
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>兄弟組件通信</title> 8 9 </head> 10 <body> 11 12 <div id="app"> 13 14 <toubu> 我是頭部組件 </toubu> 15 16 <!-- 叔叔組件註冊點擊事件 --> 17 <shushu>我是叔叔組件</shushu> 18 19 20 21 22 </div> 23 24 25 26 <script src="./vue.js"></script> 27 <script> 28 // 註冊中央管理器 29 var bus = new Vue(); 30 Vue.component('toubu',{ 31 data() { 32 return { 33 name:'我是頭部組件' 34 } 35 }, 36 template:` 37 <div> 38 39 <h1>{{name}}</h1> 40 41 </div> 42 `, 43 mounted() { 44 // 在生命週期函數中監聽chg事件 45 bus.$on('chg',(newName) => { 46 this.name = newName 47 }) 48 }, 49 }) 50 Vue.component('shushu',{ 51 template:` 52 53 <div> 54 <!-- 叔叔組件註冊點擊事件 --> 55 <button @click='chufa'>修改頭部組件信息</button> 56 57 </div> 58 `, 59 methods:{ 60 chufa:function(){ 61 // 當叔叔組件的點擊事件觸發，會執行chufa方法chufa方法會使用中間管理器bus的$emit去觸發chg事件。 62 // 同時頭部組件設置了chg事件的監聽，當chg觸發，就會修改本身的數據 63 bus.$emit('chg','shusuh組件改變了頭部組件') 64 } 65 } 66 }) 67 68 var vm = new Vue({ 69 el: "#app" 70 }) 71 </script> 72 </body> 73 </html>