vue组件通讯
一、父子组件通讯
1. 父传子通过prop通讯
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空实例）
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>
