1、EventBus

//子组件
  mounted() {
    this.$bus.off('clearSlides')
    this.$bus.on('clearSlides', () => {
      this.filterAlarmData = []
    })
  }
//父组件
    switchAR(item) {
      this.$bus.emit('clearSlides')
    }

2、普通方法

//子组件
<template>  
  <div class="train-city">  
    <h3>父组件传给子组件的toCity:{{sendData}}</h3>   
    <br/><button @click='select(`大连`)'>点击此处将‘大连’发射给父组件</button>  
  </div>  
</template>  
<script>  
  export default {  
    name:'trainCity',  
    props:['sendData'], // 用来接收父组件传给子组件的数据  
    methods:{  
      select(val) {  
        let data = {  
          cityname: val  
        };  
        this.$emit('showCityName',data);//select事件触发后，自动触发showCityName事件  
      }  
    }  
  }  
</script>  

//父组件
<template>  
    <div>父组件的toCity{{toCity}}</div>  
    <train-city @showCityName="updateCity" :sendData="toCity"></train-city>  
<template>  
<script>  
  import TrainCity from "./train-city";  
  export default {  
    name:'index',  
    components: {TrainCity},  
    data () {  
      return {  
        toCity:"北京"  
      }  
    },  
    methods:{  
      updateCity(data){//触发子组件城市选择-选择城市的事件  
        this.toCity = data.cityname;//改变了父组件的值  
        console.log('toCity:'+this.toCity)  
      }  
    }  
  }  
</script>  

3、父组件触发子组件事件

父组件： 在子组件中加上ref即可通过this.$refs.ref.method调用
<template>
  <div @click="parentMethod">
    <children ref="c1"></children>
  </div>
</template>

<script>
  import children from 'components/children/children.vue'
  export default {
    data(){
      return {
      }
    },
    computed: {
    },
    components: {      
      'children': children
    },
    methods:{
      parentMethod() {
        console.log(this.$refs.c1) //返回的是一个vue对象，所以可以直接调用其方法
        this.$refs.c1.childMethod(); 
      }
    },
    created(){
    }
  }
</script>

4、动态 Prop
类似于用 v-bind 绑定 HTML 特性到一个表达式，也可以用 v-bind 动态绑定 props 的值到父组件的数据中。每当父组件的数据变化时，该变化也会传导给子组件：

<div id="app">
    <div>
      <input v-model="parentMsg">
      <br>
      <child v-bind:message="parentMsg"></child>
    </div>
</div>
 
<script>
// 注册
Vue.component('child', {
  // 声明 props
  props: ['message'],
  // 同样也可以在 vm 实例中像 "this.message" 这样使用
  template: '<span>{{ message }}</span>'
})
// 创建根实例
new Vue({
  el: '#app',
  data: {
    parentMsg: '父组件内容'
  }
})
</script>