Vue.js中的组件通信

组件注册

1. Vue.component(组建名称, 组件的配置)
2. 在组件中使用components的配置项来表示
3. 问题：组件命名问题

• 组件命名和html原生标签冲突 Header Footer ----> header footer
  
• 大驼峰的写法
  

  Vue.componennt('ZhangJun',{
    template: '<div></div>'
  })

  <div id = "app">
    <!-- <ZhangJun></ZhangJun>   错的-->
    <zhang-jun></zhang-jun>
  </div>

  .box{
    background-color: red
  }

  box.style.backgroundColor = 'red'

组件通信

注意： 组件通信， 无论效果是如何的， Vue都是单向数据流（组件之间的数据通信）

1. 父子组件通信
   

绑定的是简单类型数据

父组件中定义数据， 通过单向数据绑定的形式， 将数据绑定在子组件身上， 属性是自定义属性，

子组件通过配置项中的props接收数据， props可以是一个数组，数组中放的是自定义属性名称

那么这个自定义属性可以向data中的数据一样直接在子组件模板中使用

父组件中数据一旦修改， 子组件数据就会修改， 那么这也就是单项数据流

子父通信（效果上像， 间接的使用了父组件的东西 ） 【不推荐大家使用】

绑定复杂数据类型 --------

父组件中的数据是一复杂数据类型， 那么父组件绑定数据的时候， 给子组件的是一个引用地址

子组件可以通过这个引用地址， 修改这个数据

效果上像， 子组件和父组件通信了， 违背单项数据流

父组件可以传递一个方法给子组件

父组件定义方法， 然后将这个方法通过单向数据绑定的形式传递给子组件

子组件通过props属性接收， 然后通过 @click = “方法名”

通过自定义事件来实现通信

父组件中定义 数据 和 方法（方法是用来操作数据的）

在子组件身上绑定自定义事件

子组件定义方法， 在这个方法中通过 this.$emit(eventType,实际参数) 来调用自定义事件的事件处理程序

  <!-- html结构代码 -->
  <div id="app">
    <King></King>
  </div>
  <template id="king">
      <div>
        <h3> I am king </h3>
        <!-- <People v-on: get = "get"></People> -->
        <p> 国库中有：{{ gk }} 钱 </p>
        <People @get = "get"></People>
      </div>
  </template>
  <template id="people">
    <div>
      <h3> I am people </h3>
      <button @click = "give"> 交钱 </button>
    </div>
  </template>

<!-- js代码 -->
  Vue.component('King',{
    template: '#king',
    data () {
      return {
        gk: 0
      }
    },
    methods: {
      get( value ){
        this.gk += value 
      }
    }
  })
  Vue.component('people',{
    template: '#people',
    data () {
      return {
        money: 2000
      }
    },
    methods: {
      give () {
        this.$emit('get', this.money/2)
      }
    }
  })
  new Vue({
    el: '#app'
  })  

非父子组件通信

使用ref来绑定组件， （注意：ref也可以绑定DOM元素） 【ref链】

在父组件的模板中， 使用ref = refName 绑定在两个兄弟组件身上

在任意一个子组件中， 就可以通过 this.p a r e n t . parent.parent.refs.refName 就可以获得另一个子组件了， 同时这个自组件身上的数据和方法同样也得到了

通过事件总线（bus）

它是通过事件的发布（声明）， 以及事件的订阅（触发）来做的

2. 首先在js中 创建一个bus对象（vm）

var bus = new Vue()

1. 在Count组件中定义数据， 和修改数据的方法
2. 在Count组件中 通过 created 钩子 ， 进行bus事件的发布

created: {
      bus.$on('add',this.addCount)
    }

5. 在MyButton组件的方法中通过 bus进行事件的订阅

increment () {
      bus.$emit( 'add' )
    }

多组件状态共享

• 使用 Vue-Router
• 使用状态管理工具 Vuex