一、父子组件通讯
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>
原文：https://www.cnblogs.com/boye-1990/p/10581158.html