Vue 的单文件组件在运用 Vue 时异常常常使用，所以我们也会常常碰到组件之间须要通报数据的时刻，大抵分为三种状况：

• 父组件向子组件通报数据，经由过程 props 通报数据。

• 子组件向父组件通报数据，经由过程 events 通报数据。

• 两个同级组件之间通报数据，经由过程 event bus 通报数据。

  文档中也已细致的说清楚明了种种状况下的解决方法，然则如今我在还没有浏览若干文档的状况下，没有找到有单文件组件方面的详细誊写体式格局，智商和理解能力有限的状况下，本身尝试了一下，末了发明实际上是一样的。所以这篇文章实际上是空话，然则照样想纪录一下，不枉本身花了一个多小时。

准备工作，我新建了 6 个文件，分别是：

• index.html

• main.js 「Vue 实例」

• app.vue 「根组件，包括 page 和 footer 组件」

• page.vue 「msg 的父组件，footer 的 同级组件」

• msg.vue

• footer.vue

父组件向子组件通报数据，经由过程 props 通报数据。

这里我以 page 向 msg 通报数据为例：
page.vue 中

<template>
    <div class="page">
        page
        <msg :love="message"></msg>
    </div>
</template>

<script>
import msg from './msg.vue'

export default {
  name: 'page',
  components: { msg },
  data () {
    return {
      message: 'page-msg'
    }
  }
}
</script>

<style>

</style>

msg.vue 中

<template>
    <div class="msg">
        {{ love }}
  </div>
</template>

<script>
export default {
  name: 'msg',
  props: ['love']
}
</script>

<style>

</style>

  如许今后就会发明，完成了把父组件 page 中的数据通报到子组件 msg 中了。
  别的，须要强调一下的是，不要在子组件中修正 props 的值，固然修正是有用的，异常不引荐，而且 Vue 也会有正告提醒。准确的做法是通报给 data 中的属性或许盘算属性。props 中的值是能够经由过程 this.love 访问到的。
  特别注意 props 值是援用范例时的状况，不能够举行简朴的赋值，会影响到父组件，准确的做法是举行深拷贝。

子组件向父组件通报数据，经由过程 events 通报数据。

父组件 page.vue 中

<template>
    <div class="page">
        page
        <msg @passData="getData"></msg>
    </div>
</template>

<script>
import msg from './msg.vue'

export default {
  name: 'page',
  components: { msg },
  data () {
    return {
      message: 'hi'
    }
  },
  methods: {
    getData (data) {
      console.log(data)
    }
  }
}
</script>

<style>

</style>

子组件 msg.vue 中

<template>
    <div class="msg">
    {{ msg }}
    <button @click="pass">点击</button>
  </div>
</template>

<script>
export default {
  name: 'msg',
  data () {
      return {
          msg: 'hello'
      }
  },
  methods: {
      pass () {
      this.$emit('passData', 'success')
    }
  }
}
</script>

<style>

</style>

点击后就会发明 console 出了 ‘success’。

同级元素之间通报数据，经由过程 event bus 来通报。

须要引入一个 Vue 实例 作为中心总线。
page 组件中

<template>
    <div class="page">
        page
        <button @click="changeMsg">click</button>
    </div>
</template>

<script>
import msg from './msg.vue'
import { bus } from '../bus.js'

export default {
  name: 'page',
  components: { msg },
  data () {
    return {
      message: 'hi'
    }
  },
  methods: {
    changeMsg () {
      bus.$emit('change', '666')
    }
  }
}
</script>

<style>

</style>

footer 组件中

<template>
    <div class="footer">
        footer
    </div>
</template>

<script>
import { bus } from '../bus.js'

export default {
  name: 'footer',
  data () {
    return {
      msg: 'hi'
    }
  },
  created () {
      bus.$on('change',(data)=>{
      console.log(data)
    })
  }
}
</script>

<style>

</style>

嗯，末了发明打印出来了 ‘666’，如许就完成了。

末了总结一下：

• 父组件向子组件通报数据，经由过程 props 通报数据。详细做法只须要在父组件中绑定，在子组件中声明。

//父组件
<father>
    <child :love="msg"></child>
</father>

//子组件
export default {
    ...
    props: ['love']
}

• 子组件向父组件通报数据，经由过程 events 通报数据。详细做法时在父组件中监听，在子组件中触发。

<father>
    <child @passData="getData"></child>
</father>

//子组件
export default {
    ...
   methods: {
       pass () {
            this.$emit('passData', 'hi')
       } 
   }
}

• 两个同级组件之间通报数据，经由过程 event bus 通报数据。

import { bus } from './bus.js'//两个组件都要引入

//触发事宜
export default {
    ...
   methods: {
       passData () {
            this.$emit('communicate', 'hello')
       } 
   }
}

//监听事宜
export default {
    ...
   mounted: {
        this.$on('communicate', (data) => {
            //...
        })
   }
}

嗯，空话较多，毫无干货。作为刚进入前端行业，刚开始写博客的新人，瑕玷和不足贫苦人人指出。转载请说明出处。