vue实现传值

Vue 传值方法

Vue 提供了多种组件间传值的方式，适用于不同场景的需求。以下是常见的传值方法：

Props 父传子

父组件通过属性向子组件传递数据，子组件通过 props 接收：

<!-- 父组件 -->
<template>
  <ChildComponent :message="parentMessage" />
</template>

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

<!-- 子组件 -->
<script>
export default {
  props: ['message'],
  mounted() {
    console.log(this.message) // Hello from parent
  }
}
</script>

$emit 子传父

子组件通过事件向父组件传递数据：

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

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

<!-- 父组件 -->
<template>
  <ChildComponent @message="handleMessage" />
</template>

<script>
export default {
  methods: {
    handleMessage(msg) {
      console.log(msg) // Hello from child
    }
  }
}
</script>

Event Bus 跨组件通信

创建全局事件总线实现任意组件间通信：

// event-bus.js
import Vue from 'vue'
export const EventBus = new Vue()

// 发送组件
EventBus.$emit('event-name', data)

// 接收组件
EventBus.$on('event-name', data => {
  console.log(data)
})

Vuex 状态管理

适用于大型应用的状态集中管理：

// 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++
    }
  }
})

// 组件中使用
this.$store.commit('increment')
console.log(this.$store.state.count)

provide/inject 跨层级传值

祖先组件向后代组件注入依赖：

// 祖先组件
export default {
  provide() {
    return {
      theme: 'dark'
    }
  }
}

// 后代组件
export default {
  inject: ['theme'],
  created() {
    console.log(this.theme) // dark
  }
}

$attrs/$listeners 高阶传值

传递未在 props 中声明的属性和事件：

<!-- 父组件 -->
<ChildComponent :title="title" @custom="handler" />

<!-- 中间组件 -->
<GrandChild v-bind="$attrs" v-on="$listeners" />

<!-- 最终子组件 -->
export default {
  props: ['title'],
  mounted() {
    this.$emit('custom') // 触发父组件handler
  }
}

$parent/$children 直接访问

直接访问父/子组件实例（不推荐）：

// 访问父组件数据
this.$parent.someData

// 访问子组件方法
this.$children[0].someMethod()

每种传值方法适用于不同场景，应根据具体需求选择最合适的方式。简单父子通信使用 props/$emit，复杂应用建议采用 Vuex 管理状态。