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>