7.7 组件通信

组件关系可分为父子组件通信、兄弟组件通信、跨级组件通信

7.7.1 自定义事件—子组件给父组件传递数据

使用v-on 除了监昕 DOM 事件外，还可以用于组件之间的自定义事件。
JavaScript 的设计模式一一观察者模式， dispatchEvent 和 addEventListener这两个方法。Vue 组件也有与之类似的一套模式，子组件用$emit()来触发事件，父组件用$on（）来监听子组件的事件 。
直接甩代码

第一步：自定义事件
第二步：在子组件中用$emit触发事件，第一个参数是事件名，后边的参数是要传递的数据
第三步：在自定义事件中用一个参数来接受

  <div id="app">
    <p>您好,您现在的银行余额是{{total}}元</p>
    <btn-compnent @change="handleTotal"></btn-compnent>
  </div>
------------------
<script>
//需求通过加减号按钮来给父组件传递数据
let app = new Vue({
  el: '#app',
  data: {
    total: 0
  },
  methods: {
    handleTotal: function(value){
      //此处的形参value是传递过来的数据
      this.total = value
    }
  },
  components: {
    'btn-compnent': {
      template:'<div>\
        <button @click="handleincrease">+1</button>\
        <button @click="handlereduce">-1</button> \
      </div>',
      data: function(){
        return {count: 0}
      },
      methods: {
        handleincrease: function(){
          this.count = this.count + 1
          this.$emit('change',this.count) 
          //第一个参数是自定义事件，第二个参数是要传递的数据
        },
        handlereduce: function(){
          this.count = this.count - 1
          this.$emit('change',this.count)
        }
      }
    }
  }
})
<script>

效果展示

7.7.2 在组件中使用v-model

$emit的代码,这行代码实际上会触发一个 input事件, input后的参数就是传递给vmodel绑定的属性的值
v-model 其实是一个语法糖，这背后其实做了两个操作

v-bind 绑定一个 value 属性

v-on 指令给当前元素绑定 input 事件

要使用v-model,要做到:

接收一个 value 属性。

在有新的 value 时触发 input 事件

效果展示

7.7.3 非父组件之间的通信

官网描述：
有时候两个组件也需要通信（非父子关系）。在简单的场景下，可以使用一个空Vue实例作为中央事件总线。

var bus = new Vue()

//触发组件A中的事件
bus.$emit('id-selected', 1)

//在组件B创建的钩子中监听事件
bus.$on('id-selected', function(id){
    //...
})

图形实例：

图形实例

  <div id="app">
    <a-component></a-component>
    <b-component></b-component>
  </div>

  <script>
Vue.component('a-component',{
  template: '<div><button @click="handle">点击我向B组件传递数据</button></div>',
  data: function(){
    return {
      aaa: '我是来自A组件的内容',
    }
  },
  methods: {
    handle: function(){
      this.$root.bus.$emit('lala',this.aaa);
    }
  }
})

Vue.component('b-component',{
  template: '<div></div>',
  created:function() {
    //A组件在实例创建的时候就监听事件---lala事件
    this.$root.bus.$on('lala', function(value){
      alert(value)
    })
  }
})


let app = new Vue({
  el: '#app',
  data: {
    //bus中介
    bus: new Vue()
  }
})
 </script>

父链：this.$parent

Vue.component('child-component',{
  template: '<button @click="setFatherData">通过点击我修改父亲的数据</button>',
  methods: {
    setFatherData: function(){
      this.$parent.msg = '数据已修改了'
    }
  }
})

子链：this.$refs
提供了为子组件提供索引的方法，用特殊的属性ref为其增加一个索引

let app = new Vue({
  el: '#app',
  data: {
    //bus中介
    bus: new Vue(),
    msg: '数据还未修改',
    formchild: '还未拿到'
  },
  methods: {
    //用来拿子组件中的内容 ---- $refs
    getChildData: function(){
      this.formchild = this.$refs.a.msg 
    }
  }
})

效果展示