Vue组件通讯

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

1.父->子组件通讯

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

 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>

 2.子->父组件通讯

  　　一般子->父组件通讯是通过Events事件进行值得传递

  父组件
   <template lang="pug">
    .father
      Children(@hand='hand') //自定义事件1 </template>

 <script>
 import Children from './Children'
 export default {
   name: 'father',
  data () {
     return {
       msg: '我是father的数据'
     }
   },
   components: {
      Children
    },
   methods: {
     hand (msg) {
       alert(msg)　　//拿到子组件传递的值
     }
   }
 }
 </script>

 子组件
 <template lang="pug">
   .children
     input(type='button' value='clickMe' @click='handle')
 </template>

 <script>
 export default {
   name: 'children',
   data () {
     return {
       msg: '我是children的数据'
     }
   },
   methods: {
     handle () {
       this.$emit('hand', this.msg)  //发送事件名+传递的值
     }
 }
 </script>

3.兄弟组件通讯

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

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

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

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

 <template lang="pug">
   .emit
     .box Emit组件a
     button(@click='show') 向on组件传值
 </template>

 <script>
 import bus from '../assets/eventBus'
 export default {
   methods: {
     show () {
       bus.$emit('user', 'haha')
     }
   }
 }
 </script>

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

 <template lang="pug">
   .on
     .cont 接受emit组件的数据:{{msg}}
 </template>

 <script>
 import bus from '../assets/eventBus'
 export default {
   data () {
     return {
       msg: 'on'
     }
   },
   mounted () {
     let self = this
     bus.$on('user', (msg) => {
       self.msg = msg
     })
   }
 }
 </script>

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