Vue 单文件中的数据传递

Vue 的单文件组件在使用 Vue 时非常常用，所以我们也会经常遇到组件之间需要传递数据的时候，大致分为三种情况：

1. 父组件向子组件传递数据，通过 props 传递数据。
2. 子组件向父组件传递数据，通过 events 传递数据。
3. 两个同级组件之间传递数据，通过 event bus 传递数据。
   

新建了 6 个文件，分别是：

1. index.html
2. main.js 「Vue 实例」
3. app.vue 「根组件，包含 page 和 footer 组件」
4. page.vue 「msg 的父组件，footer 的 同级组件」
5. msg.vue
6. 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 传递数据。具体做法只需要在父组件中绑定，在子组件中声明。

?

1 2 3 4 5 6 7 8 9 10

//父组件 <father>    <child :love= "msg" ></child> </father>   //子组件 export default {    ...    props: [ 'love' ] }

子组件向父组件传递数据，通过 events 传递数据。具体做法时在父组件中监听，在子组件中触发。

?

1 2 3 4 5 6 7 8 9 10 11 12 13

<father>    <child @passData= "getData" ></child> </father>   //子组件 export default {    ...    methods: {      pass () {        this .$emit( 'passData' , 'hi' )      }    } }

两个同级组件之间传递数据，通过 event bus 传递数据。

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

import { bus } from './bus.js' //两个组件都要引入   //触发事件 export default {    ...    methods: {      passData () {        this .$emit( 'communicate' , 'hello' )      }    } }   //监听事件 export default {    ...    mounted: {      this .$on( 'communicate' , (data) => {        //...      })    } }