Vue组件之间的通信

父子组件通信

父组件控制子组件，父组件控制自己的数据变化，将变化后的数据通过props自定义属性传给子组件
1.在组件标签上使用自定属性
2.在组件内部通过props来接受自定义属性
3.接受完了即可以在组件里直接使用 ，但是只能用不能改

 <div id='app1'>  
    这里是实例
    {{money}}
    <hr>  
    <!-- 在tp1组件标签上使用 xixi自定义属性 -->
    <tp1 :xixi='money'></tp1>
  </div>

<!-- 组件模板 -->
  <template id='tp1'>
    <div class='tp1'>
      这里是组件
      {{xixi}}
    </div>
  </template>

<script>
Vue.component('tp1',{
  template:'#tp1',
  data(){
    return{
      hehe:123
    }
  },
  props:['xixi'] //接收自定义属性
  let vm1 = new Vue({
  el:'#app1',
  data:{
    money:'资产'
  }
})
</script>

子父组件通信

子组件控制父组件的数据，父组件控制自己的数据变化，将控制函数通过emit自定义事件传递子组件，供子组件调用
1.在组件标签绑定一个自定义事件
<son @custom=‘add’>
2.在组件的内部通过$emit 触发这个自定义事件

<div id='app1'>  
  这里是实例
  <hr>
  <!-- 绑定在son身上的自定义事件 事件名叫 custom 处理函数叫add -->
  <son @hehe='change'></son>
  <!-- 绑定在button身上的内置事件 事件名叫 click 处理函数叫add -->
  <!-- <button @click='add'>添加</button> -->
  </div> 

<!-- 组件模板 -->
<template id='tp1'>
  <div>
    这里是子组件
    <button @click='sonClick'> 这里是子组件的按钮</button>
  </div>
</template>

<script>
Vue.component('son',{
  template:'#tp1',
  methods: {
    sonClick(){
      console.log('子组件的处理方法') 
      // 通过emit方法触发自定义事件 参数1 自定义事件名
      this.$emit('hehe',666)
    }
  },
})
let vm1 = new Vue({
  el:'#app1',
  methods: {
    change(num){
      alert('点到我了'+num)
    }
  },
})
</script>

兄弟通信

兄弟组件的通信就是父子组件通信和子父组件通信的结合，需要父组件作为中间组件进行数据传递。

<div id='app1'>  
    <!-- 将父亲的数据通过自定义属性传给组件1使用 -->
    <son1 :show='state'></son1>
    <hr>  
     <!-- 将父亲的方法通过自定义事件传给组件2使用 -->
    <son2 @custom='faToggle'></son2>
  </div>
  <hr>
  <!-- 组件1 -->
  <template id='son1'>
    <div>
       这里是组件1
       <div class='test' v-show='show'>
       </div>
    </div>
  </template>
 <!-- 组件2 -->
 <template id='son2'>
  <div>
     这里是组件2
     <button @click='son2Click'>显示隐藏</button>
  </div>
</template>

Vue.component('son1',{
  template:'#son1',
  props:['show']  //接受爸爸传来的数据
})
Vue.component('son2',{
  template:'#son2',
  methods: {
    son2Click(){
      this.$emit('custom') //触发爸爸传来的函数
    }
  },
})
let vm1 = new Vue({
  el:'#app1',
  data:{
    state:false
  },
  methods: {
    faToggle(){
      this.state=!this.state
    }
  },
})

组件1 和组件2 是兄弟
组件1 有div 可以显示隐藏
组件2 有butoon 控制显示隐藏
控制显示隐藏的值放在公有的爸爸上