Vue组件通讯详解编程语言

 1 父组件 
 2 <template lang="pug"> 
 3    .father 
 4      Children(:name='msg') 
 5 </template> 
 6 <script> 
 7  
 8 import Children from './Children' 
 9 export default { 
10  name: 'father', 
11    data () { 
12      return { 
13        msg: '我是father的数据' 
14      } 
15    } 
16  } 
17 </script>

1 子组件 
2  <template lang="pug"> 
3   .children 
4     .box {{name}} 
5 </template> 
6  
7 <script> 
8 export default { 
9   name: 'father', 
10   // props: ['name'],  1.props的第一种写法 
11   // props: {　　　　　　2.props的第二种写法 
12   //   name: Array 
13   // }, 
14   props: {　　　　　　　　3.props的第三中写法(推荐) 
15     name: { 
16       type: String 
17     } 
18   }, 
19   data () { 
20     return { 
21       msg: '我是children的数据' 
22     } 
23   } 
24 } 
25 </script>

 1 2.子->父组件通讯 
 2   
 3  　　一般子->父组件通讯是通过Events事件进行值得传递 
 4   
 5  父组件 
 6   <template lang="pug"> 
 7    .father 
 8      Children(@hand='hand') //自定义事件1 </template> 
 9   
10 <script> 
11 import Children from './Children' 
12 export default { 
13   name: 'father', 
14  data () { 
15     return { 
16       msg: '我是father的数据' 
17     } 
18   }, 
19   components: { 
20      Children 
21    }, 
22   methods: { 
23     hand (msg) { 
24       alert(msg)　　//拿到子组件传递的值 
25     } 
26   } 
27 } 
28 </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>

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

 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>

 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>