1.props和 $emit$ 父子通信

1.1props父传子数据

父组件导入子组件，注册并且使用子组件后

通过单向绑定把自身的数据绑定到子组件上

子组件通过props接收

示例：

// 父组件
<template>
	<div id="app">
    <Ch1Com :name="name"></Ch1Com>
  </div>
</template>
<script>
  import Ch1Com from './components/Ch1Com'
	export default{
    name:'App',
    data(){
      return {
        name:'liyiyang'
      }
    },
  }
</script>


//子组件 Ch1Com.vue
<template>
	<div>
    <h1>{{name}}</h1>
  </div>
</template>
<script>
	export default{
    props:['name']
  }
</script>

1.2 $emit子传父

其实就是自定义事件实现的父子之间的通信

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

子组件触发事件

示例：

// 父组件
<template>
	<div id="app">
    <Ch1Com :name="name" @setName="setName"></Ch1Com>
  </div>
</template>
<script>
  import Ch1Com from './components/Ch1Com'
	export default{
    name:'App',
    data(){
      return {
        name:'liyiyang'
      }
    },
    methods:{
      setName(name){
        this.name=name
      }
    },
  }
</script>


//子组件 Ch1Com.vue
<template>
	<div>
    <h1>{{name}}</h1>
    <button @click="$emit('setName',('李毅洋'))">修改父组件name</button>
  </div>
</template>
<script>
	export default{
    props:['name']
  }
</script>

2.ref父子通信

子组件设置ref属性

父组件通过ref调用子组件的属性或方法

示例只是设置了子组件的数据

还可以通过ref设置父组件的数据为子组件的数据

即ref实现父传子、子传父

示例：

// 父组件
<template>
	<div id="app">
    <Ch1Com ref="Ch1Com"></Ch1Com>
  </div>
</template>
<script>
  import Ch1Com from './components/Ch1Com'
  export default{
    name:'App',
    components:{Ch1Com},
    data(){
      return {
        name:'liyiyang'
      }
    },
    methods:{
      setName(name){
        this.name=name
      },
    },
  }
</script>

//子组件 ./components/Ch1Com.vue
<template>
	<div>
    <h1>子组件name：{{name}}</h1>
  </div>
</template>
<script>
  export default{
   
  }
</script>

3`.$parent`和`$childer`父子通信

不再赘述，很简单

4.全局事件总线隔代、父子、兄弟

1.创建一个事件总线

1.1第一种方法，在main.js种创建

// main.js中
new Vue({
  render: h => h(App),
  // 在beforeCreate中加入Vue.prototype.$bus=this
  ```beforeCreate() {
    Vue.prototype.$bus = this
  }```
}).$mount('#app')

1.2 新建个js文件专门存储事件总线

如果这种方法使用事件总线

则在每一个需要用到事件总线的组件种引入EventBus.js

// EventBus.js
import Vue from 'vue'
export const $bus=new Vue()

2.发生事件

以下示例皆为第一种方法创建的事件总线

有两个兄弟组件 add 和list

// add
<template>
  <div></div>
</template>
<script>
  // 如果是第二种创建的要在此处引入$bus
  // import {$bus} from './EventBus.js'
  import {$bus} from ''
  export default {
    mounted(){
      this.$bus.$on('需要被触发的事件名',(参数)=>{   // 被触发后执行的回调函数
        逻辑
      })
    }
  }
</script>

// add
<template>
  <div>
  	<button @click="msg">msg</button>
  </div>
</template>
<script>
  // 如果是第二种创建的要在此处引入$bus
  // import {$bus} from './EventBus.js'
  export default {
    methods:{
      msg(){
        this.$bus.$emit('需要被触发的事件名',参数)
      }
    }
  }
</script>

3.移除事件监听

 // 如果是第二种创建的要在此处引入$bus
 // import {$bus} from './EventBus.js'
$bus.$off('被触发的事件名', {})

5.js原生事件实现vue组件通信

很恶心很麻烦不推荐使用

父组件

mounted() {
   document.addEventListener('delHandler', e => {
     this.list.splice(e.detail.index, 1)
     })
}

子组件

methods: {
  delItemHandler() {
    document.dispatchEvent(
      new CustomEvent('delHandler', {
        detail: {
          index: this.index
          }
     })
   )
 }
}

子组件中dispatchEvent抛出方法

因为要传参，所以要new一个customEvent

customEvent中有两个参数

第一个为事件名，第二个为要传的参数

要传的参数要以对象包裹，最外层为detail

detail又要包裹一个对象

这个对象中才是放置需要传递的数据的地方

Vue通信方式

1.props和$emit$父子通信