Vue 组件间常用传值方法，全面解析六种经典案例，助你高效构建组件架构

正文：

在 Vue.js 中，组件传值是实现组件间数据传递和交互的关键。通过合理的组件传值，我们可以将数据从一个组件传递到另一个组件，从而实现组件间的通信和协作。

一、props：单向数据流，父组件向子组件传递数据

props 是 Vue.js 中最常用的组件传值方法，它允许父组件向子组件传递数据。props 是只读的，这意味着子组件不能修改父组件传递的数据。

<!-- 父组件 -->
<template>
  <child-component :message="message"></child-component>
</template>

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

<!-- 子组件 -->
<template>
  <div>{{ message }}</div>
</template>

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

二、$emit：子组件向父组件发送事件，实现子组件到父组件的数据传递

$emit 是 Vue.js 中另一个常用的组件传值方法，它允许子组件向父组件发送事件。父组件可以通过监听子组件发出的事件来接收数据。

<!-- 子组件 -->
<template>
  <button @click="emitMessage">Send message</button>
</template>

<script>
export default {
  methods: {
    emitMessage() {
      this.$emit('message', 'Hello from child!')
    }
  }
}
</script>

<!-- 父组件 -->
<template>
  <child-component @message="receiveMessage"></child-component>
</template>

<script>
export default {
  methods: {
    receiveMessage(message) {
      console.log(message) // Hello from child!
    }
  }
}
</script>

三、$attrs：将父组件未识别的属性传递给子组件

$attrs 是一个特殊的 props，它允许将父组件未识别的属性传递给子组件。这对于需要动态渲染子组件的情况非常有用。

<!-- 父组件 -->
<template>
  <child-component :message="message" :color="color"></child-component>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello from parent!',
      color: 'red'
    }
  }
}
</script>

<!-- 子组件 -->
<template>
  <div :style="{ color: color }">{{ message }}</div>
</template>

<script>
export default {
  props: ['message'],
  computed: {
    color() {
      return this.$attrs.color || 'black'
    }
  }
}
</script>

四、slot：子组件定义插槽，父组件填充插槽内容

slot 是 Vue.js 中一种特殊的组件传值方式，它允许子组件定义插槽，而父组件则可以填充这些插槽的内容。这对于需要创建可复用组件的情况非常有用。

<!-- 子组件 -->
<template>
  <div>
    <slot name="header"></slot>
    <slot name="content"></slot>
    <slot name="footer"></slot>
  </div>
</template>

<!-- 父组件 -->
<template>
  <child-component>
    <template v-slot:header>
      <h1>This is the header</h1>
    </template>

    <template v-slot:content>
      <p>This is the content</p>
    </template>

    <template v-slot:footer>
      <button>This is the footer</button>
    </template>
  </child-component>
</template>

五、eventBus：全局事件总线，实现组件间通信

eventBus 是一个全局事件总线，它允许组件间通过发布和订阅事件来进行通信。这对于需要在不同组件间传递数据的场景非常有用。

// eventBus.js
export default new Vue()

// 组件 A
export default {
  created() {
    eventBus.$on('message', this.receiveMessage)
  },
  methods: {
    receiveMessage(message) {
      console.log(message) // Hello from component B!
    }
  }
}

// 组件 B
export default {
  methods: {
    sendMessage() {
      eventBus.$emit('message', 'Hello from component B!')
    }
  }
}

六、vuex：状态管理，实现组件间数据共享

vuex 是一个状态管理工具，它允许我们在 Vue.js 应用程序中集中管理状态。这对于需要在不同组件间共享数据的场景非常有用。

// store.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

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

// 组件 A
export default {
  computed: {
    count() {
      return this.$store.state.count
    }
  },
  methods: {
    increment() {
      this.$store.commit('increment')
    }
  }
}

// 组件 B
export default {
  computed: {
    count() {
      return this.$store.state.count
    }
  }
}

以上六种组件传值方法各有其特点和适用场景。在实际开发中，我们可以根据具体的需求选择合适的组件传值方法，从而实现组件间的数据传递和交互，构建更加灵活、可维护的 Vue.js 应用程序。