Vue组件通信

组件通信 – 单项数据流

父子组件通信：

父组件将自己的数据传递给子组件

• 1.父组件将自己的数据通过属性绑定的形式传递给子组件

 <Son :aa = "money"></Son>

• 2.子组件在自己的配置项中通过 props 来接收这个属性

Vue.component('Son',{
    template: '#son',
    // props: ['aa'],
    props: {
      // 属性： 属性的数据类型  给数据做属性验证，验证数据类型
      'aa': Number 
    }
  })

• 3.这个属性可以直接向全局变量一样使用

<p> 我老爸给了我：{{ aa }} 钱 </p>

案例：

<div id="app">
    <Father></Father>
  </div>
  <template id="father">
    <div>
      <h3>father</h3>
      <p>I hava{{money}}</p>
      <hr>
      <Son :aa="money"></Son>
    </div>
  </template>
  <template id="son">
    <div>
      <h3>son</h3>
      <p>father give me{{aa}}</p>
    </div>
  </template>

Vue.component('Father', {
    template: '#father',
    data() {
      return {
        money: 1000
      }
    }
  })
  Vue.component('Son', {
    template: '#son',
----------------方式一-------------

    // props: ['aa']  
    
----------------方式二-------------    

    props:{
      'aa':Number
    }
  })

new Vue({
 el: '#app'
})

子父组件通信：

子组件将一个数据发送给父组件

• 1.父组件中定义一个数据，然后在methods定义一个方法用来修改这个数据

Vue.component('Father',{
  template: '#father',
  data () {
    return {
      num: 0
    }
  },
  methods: {
    add ( val ) {
      console.log('add')
      this.num += val
    }
  }
})

• 2.父组件通过自定义事件的形式，将父组件的一个方法传递给子组件

<Son @aa = 'add'></Son>

• 3.子组件可以通过
• this.$emit( 自定义事件名称，参数1，参数2…) 来订阅这个自定义事件

this.$emit('aa',this.money)

方法一：

<div id="app">
    <Father></Father>
  </div>
  <template id="father">
    <div>
      <h3> 这里是father </h3>
      <p> 这里有 {{ num }} 钱 </p>
      <hr>
      <Son @aa = 'add'></Son>通过自定义事件，将方法传给子组件
    </div>
  </template>
  <template id="son">
    <div>
      <h3> 这里是son </h3>
      <button @click = "give"> give money </button>
    </div>
  </template>

Vue.component('Father',{
    template: '#father',
    data () {
      return {
        num: 0
      }
    },
    methods: {
      add ( val ) {//通过val参数接收this.money
        console.log('add')
        this.num += val
      }
    }
  })

  Vue.component('Son',{
    template: '#son',
    data () {
      return {
        money: 1000
      }
    },
    methods: {
      give () {
        this.$emit('aa',this.money)//通过give方法调用aa事件
      }
    }
  })

  new Vue({
    el: '#app'
  })

方法二：

父组件将一个方法直接通过单向数据绑定的形式传递给子组件，子组件通过props接收，然后直接使用

<div id="app">
    <Father></Father>
</div>
<template id="father">
    <div>
        <h3>father</h3>
        <p>I have {{money}}</p>
        <hr>
        <Son :add = 'add'></Son>
    </div>
</template>
<template id="son">
    <div>
        <h3>son</h3>
        <p>I have {{money}}</p>
        <button @click="add(money)">give money</button>
    </div>
</template>

Vue.component('Father', {
    template: '#father',
    data() {
        return { money: 0 }
    },
    methods: {
        add(val) {
            this.money += val;
        }
    }
});
Vue.component('Son', {
    template: '#son',
    data() {
        return { money: 1000 }
    },
    props: ['add']//接收父组件传来的自定义add方法
    // methods: {
    //     give() {
    //       this.$emit('aa',this.money) 
    //     }
    // }

})
new Vue({
    el: '#app'
})

方法三：

父组件可以将一个对象型的数据传递给子组件，子组件修改了这个数据，父组件也同样会修改

• 这个形式违反了单向数据流，用的少
• 改变是因为对象的浅拷贝

<div id="app">
    <Father></Father>
  </div>
  <template id="father">
    <div>
      <h3> father </h3>
      <p> 我有{{ jingku.money }} 钱 </p>
      <hr>
      <Son :jingku = 'jingku'> </Son>
    </div>
  </template>
  <template id="son">
    <div>
      <h3> son </h3>
      <hr>
      <input type="text" v-model = "jingku.money">
      <p> 我拿了{{ jingku.money }} 钱 </p>

    </div>
  </template>

Vue.component('Father',{
    template: '#father',
    data () {
      return {
        jingku: {
          money: 1000
        }
      }
    }
  })

  Vue.component('Son',{
    template: '#son',
    props: ['jingku']
  })
  new Vue({
    el: '#app'
  })

非父子组件通信：

兄弟组件将一个数据发送给兄弟组件

解决：

• 非父子组件通信第一种形式 ： ref链绑定， ref不仅可以绑定组件，也可以绑定普通元素
• 非父子组件通信第二种形式： 事件总线
  • 事件的发布：$on
  • 事件的订阅：$emit
  • 通过 new Vue 在得到另外一个实例

ref链绑定

<div id="app">
    <Brother ref="borther"></Brother>//组件绑定ref属性可以在父组件中$refs中找到。
    <hr>
    <Sister ref="sister"></Sister>//组件绑定ref属性可以在父组件中$refs中找到。
</div>
<template id="brother">
    <div>
        <h3>brother</h3>
        <p>I have {{money}}</p>
    </div>
</template>
<template id="sister">
    <div>
        <h3>sister</h3>
        <p>I have {{money}}</p>
        <button @click="give">give money</button>
    </div>
</template>

Vue.component('Brother', {
    template: '#brother',
    data() {
        return { money: 0 }
    }
});
Vue.component('Sister', {
    template: '#sister',
    data() {
        return { money: 1000 }
    },
    methods: {
        give() {
            this.$parent.$refs.borther.money = this.money;
        }
    }
})

new Vue({
    el: '#app'
})

事件总线（bus总线）

通过给bus实例对事件发布和订阅对进行兄弟元素数据传输

<div id="app">
    <Brother></Brother>
    <hr>
    <Sister></Sister>
</div>
<template id="brother">
    <div>
        <h3>brother</h3>
        <p>I have {{money}}</p>
    </div>
</template>
<template id="sister">
    <div>
        <h3>sister</h3>
        <p>I have {{money}}</p>
        <button @click="give">give money</button>
    </div>
</template>

let bus = new Vue();
Vue.component('Brother', {
    template: '#brother',
    data() {
        return { money: 0 }
    },
    mounted() {
        bus.$on('aa',//对bus实例事件的发布 (val)=>{//切记这里要用箭头函数，普通函数会导致this指向bus实例
            this.money +=val;
        })
    }
});

Vue.component('Sister', {
    template: '#sister',
    data() {
        return { money: 1000 }
    },
    methods: {
        give() {
            bus.$emit('aa', this.money)//bus实例事件的订阅调用aa自定义事件
        }
    }
});

new Vue({
    el: '#app'
})