全面解读Vue组件间传值五大场景

1. 父子组件传值

父子组件传值是最常见的组件间传值方式。父组件可以通过props属性向子组件传递数据，子组件可以通过props接收数据。

<template>
  <div>
    <child-component :message="message"></child-component>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello Vue!'
    }
  }
}
</script>

<template>
  <div>
    {{ message }}
  </div>
</template>

<script>
export default {
  props: ['message']
}
</script>

2. 兄弟组件传值

兄弟组件传值是指两个没有父子关系的组件之间的数据传递。兄弟组件之间可以通过Vuex状态管理库来传递数据。

// store.js
export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  }
})

<template>
  <div>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
export default {
  methods: {
    increment() {
      this.$store.commit('increment')
    }
  }
}
</script>

<template>
  <div>
    {{ count }}
  </div>
</template>

<script>
export default {
  computed: {
    count() {
      return this.$store.state.count
    }
  }
}
</script>

3. 跨组件传值

跨组件传值是指两个没有父子关系和兄弟关系的组件之间的数据传递。跨组件传值可以通过EventBus来实现。

// EventBus.js
export default new Vue()

<template>
  <div>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
export default {
  methods: {
    increment() {
      EventBus.$emit('increment')
    }
  }
}
</script>

<template>
  <div>
    {{ count }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    }
  },
  mounted() {
    EventBus.$on('increment', this.increment)
  },
  beforeDestroy() {
    EventBus.$off('increment', this.increment)
  },
  methods: {
    increment() {
      this.count++
    }
  }
}
</script>

4. Props

Props是Vue.js组件之间传递数据的常用方式。Props是只读的，只能在父组件中修改。

<template>
  <div>
    <child-component :message="message"></child-component>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello Vue!'
    }
  }
}
</script>

<template>
  <div>
    {{ message }}
  </div>
</template>

<script>
export default {
  props: ['message']
}
</script>

5. Emit

Emit是Vue.js组件之间传递数据的另一种常用方式。Emit是可写的，可以在子组件中修改。

<template>
  <div>
    <child-component @increment="increment"></child-component>
  </div>
</template>

<script>
export default {
  methods: {
    increment() {
      this.count++
    }
  }
}
</script>

<template>
  <div>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
export default {
  methods: {
    increment() {
      this.$emit('increment')
    }
  }
}
</script>