Vue组件通讯 - 爱码网

　　Vue最常用的组件通讯有三种：父->子组件通讯、子->父组件通讯，兄弟组件通讯.(template用的pug模板语法)

1.父->子组件通讯

　　父->子组件通讯，是通过props进行数据传递，并且具有这几个特性，单向传递，子组件接收的数据不可以更改，如果更改，会发出警告，每次父组件更新时，子组件的所有 prop 都会更新为最新值.

 1 父组件
 2  1 <template lang="pug">
 3  2   .father
 4  3     Children(:name='msg')
 5  4 </template>
 6  5 <script>
 7  6 
 8  7 import Children from './Children'
 9  8 export default {
10  9   name: 'father',
11 10   data () {
12 11     return {
13 12       msg: '我是father的数据'
14 13     }
15 14   }
16 15 }
17 16 </script>
18  1 子组件
19  2  <template lang="pug">
20  3   .children
21  4     .box {{name}}
22  5 </template>
23  6 
24  7 <script>
25  8 export default {
26  9   name: 'father',
27 10   // props: ['name'],  1.props的第一种写法
28 11   // props: {　　　　　　2.props的第二种写法
29 12   //   name: Array
30 13   // },
31 14   props: {　　　　　　　　3.props的第三中写法(推荐)
32 15     name: {
33 16       type: String
34 17     }
35 18   },
36 19   data () {
37 20     return {
38 21       msg: '我是children的数据'
39 22     }
40 23   }
41 24 }
42 25 </script>
43 2.子->父组件通讯
44 
45 　　一般子->父组件通讯是通过Events事件进行值得传递
46 
47 父组件
48     <template lang="pug">
49   .father
50     Children(@hand='hand') //自定义事件
51 </template>
52 
53 <script>
54 import Children from './Children'
55 export default {
56   name: 'father',
57   data () {
58     return {
59       msg: '我是father的数据'
60     }
61   },
62   components: {
63     Children
64   },
65   methods: {
66     hand (msg) {
67       alert(msg)　　//拿到子组件传递的值
68     }
69   }
70 }
71 </script>

 1 子组件
 2 <template lang="pug">
 3   .children
 4     input(type='button' value='clickMe' @click='handle')
 5 </template>
 6 
 7 <script>
 8 export default {
 9   name: 'children',
10   data () {
11     return {
12       msg: '我是children的数据'
13     }
14   },
15   methods: {
16     handle () {
17       this.$emit('hand', this.msg)  //发送事件名+传递的值
18     }
19 }
20 </script>

3.兄弟组件通讯

　　由上可知，父子组件通讯都会有一个媒介，相当于一个传递信息的介质，才可以使得数据传递过去。兄弟组件通讯业需要一个介质，我们通常称之为事件线~

1.创建一个组件名字：eventBus(随便起) 我放在了src/asstest/eventBus/index.js文件夹下

1 import Vue from 'vue'
2 export default new Vue()

2.创建第一个兄弟组件,名字：Emit

 1 <template lang="pug">
 2   .emit
 3     .box Emit组件a
 4     button(@click='show') 向on组件传值
 5 </template>
 6 
 7 <script>
 8 import bus from '../assets/eventBus'
 9 export default {
10   methods: {
11     show () {
12       bus.$emit('user', 'haha')  
13     }
14   }
15 }
16 </script>

3.创建第二个兄弟组件，名字：On

 1 <template lang="pug">
 2   .on
 3     .cont 接受emit组件的数据:{{msg}}
 4 </template>
 5 
 6 <script>
 7 import bus from '../assets/eventBus'
 8 export default {
 9   data () {
10     return {
11       msg: 'on'
12     }
13   },
14   mounted () {
15     let self = this
16     bus.$on('user', (msg) => {
17       self.msg = msg
18     })
19   }
20 }
21 </script>

　　在vue中常用的传值方式也就是这三种，但方放不局限于这三种。希望喜欢我的小伙伴们继续支持我。