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中常用的传值方式也就是这三种，但方放不局限于这三种。希望喜欢我的小伙伴们继续支持我。