Vue2.0子同级组件之间数据交互方法

当我们在Vue2.0中开发应用时，会遇到子组件之间需要传递数据的情况，这时候我们可以使用父子组件传参、eventBus、vuex、$attrs和$emit等方法来实现子组件之间的数据交互。

父子组件传参

父子组件之间传参是Vue2.0提供的最基本的数据交互方式，其核心思想是通过props属性将父组件的数据传递到子组件中，子组件通过props接收这些数据，从而实现子组件对父组件数据的引用和修改。

// 父组件
<template>
  <div>
    <h2>{{parentMsg}}</h2>
    <child :child-msg="childMsg" @child-change="onChildChange"></child>
  </div>
</template>
<script>
  import Child from './Child'
  export default {
    name: 'Parent',
    components: {
      Child
    },
    data () {
      return {
        parentMsg: '我是父组件中的数据',
        childMsg: ''
      }
    },
    methods: {
      onChildChange (data) {
        console.log('子组件传来的数据：', data)
      }
    }
  }
</script>

// 子组件
<template>
  <div>
    <input type="text" v-model="childMsg" @keyup.enter="onChange">
  </div>
</template>
<script>
  export default {
    name: 'Child',
    props: {
      childMsg: {
        type: String,
        default: ''
      }
    },
    methods: {
      onChange () {
        this.$emit('child-change', this.childMsg)
      }
    }
  }
</script>

在上面的代码中，父组件通过props将childMsg数据传递给子组件，在子组件中通过$emit触发child-change事件，将childMsg数据传递给父组件。

eventBus

eventBus是一个空的Vue实例，可以用来充当组件之间的中介者，可以订阅和发布事件来实现跨组件的数据传递。

// eventBus.js
import Vue from 'vue'
export default new Vue()

// 父组件
<template>
  <div>
    <h2>{{parentMsg}}</h2>
    <child></child>
  </div>
</template>
<script>
  import eventBus from './eventBus'
  export default {
    name: 'Parent',
    data () {
      return {
        parentMsg: '我是父组件中的数据'
      }
    },
    mounted () {
      eventBus.$on('child-change', data => {
        console.log('子组件传来的数据：', data)
      })
    }
  }
</script>

// 子组件
<template>
  <div>
    <input type="text" v-model="childMsg" @keyup.enter="onChange">
  </div>
</template>
<script>
  import eventBus from './eventBus'
  export default {
    name: 'Child',
    data () {
      return {
        childMsg: ''
      }
    },
    methods: {
      onChange () {
        eventBus.$emit('child-change', this.childMsg)
      }
    }
  }
</script>

在上面的代码中，我们通过一个空的Vue实例eventBus实现了父组件与子组件之间的数据传递。父组件中通过$on方法订阅了eventBus实例中的child-change事件，当子组件中通过$emit方法触发child-change事件时，就可以将数据传递给父组件。

$attrs和$emit

$attrs和$emit是Vue2.4版本开始提供的新特性，可以通过$attrs获取父组件传递给子组件的所有属性，通过$emit将事件传递给父组件。

// 父组件
<template>
  <div>
    <h2>{{parentMsg}}</h2>
    <child v-bind="$attrs" @child-change="onChildChange"></child>
  </div>
</template>
<script>
  import Child from './Child'
  export default {
    name: 'Parent',
    components: {
      Child
    },
    data () {
      return {
        parentMsg: '我是父组件中的数据'
      }
    },
    methods: {
      onChildChange (data) {
        console.log('子组件传来的数据：', data)
      }
    }
  }
</script>

// 子组件
<template>
  <div>
    <input type="text" v-model="childMsg" @keyup.enter="onChange">
  </div>
</template>
<script>
  export default {
    name: 'Child',
    inheritAttrs: false,
    data () {
      return {
        childMsg: ''
      }
    },
    methods: {
      onChange () {
        this.$emit('child-change', this.childMsg)
      }
    }
  }
</script>

在上面的代码中，我们通过v-bind="$attrs"将所有属性传递给了子组件，然后在子组件中通过inheritAttrs: false禁用了默认的属性继承，这样就只能通过$attrs获取属性。通过$emit将事件传递给父组件。

以上是Vue2.0子同级组件之间的数据交互方法的详细讲解，希望对您有所帮助。