从子组件传值到父组件：Vue中的数据流向与最佳实践

2023-10-15 10:59:47

子组件向父组件传值的方式

1. Props

Props是Vue中最简单也是最直接的方式，用于从子组件向父组件传递数据。Props是通过子组件的props属性传递的，并在子组件中通过this.props来访问。例如：

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

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

<template>
  <p>{{ message }}</p>
</template>

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

2. Emit 事件

Emit事件是另一种从子组件向父组件传递数据的方法。子组件可以使用this.$emit来触发事件，父组件可以使用v-on来监听这些事件。例如：

<template>
  <child-component @message="receiveMessage" />
</template>

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

<template>
  <button @click="sendMessage">Send Message</button>
</template>

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

3. Vuex

Vuex是一个状态管理库，用于在Vue应用程序中管理全局状态。Vuex允许您在组件之间共享数据，并以可预测的方式更新状态。例如：

// store.js
import Vuex from 'vuex'

const store = new Vuex.Store({
  state: {
    message: 'Hello from Vuex!'
  },
  mutations: {
    UPDATE_MESSAGE(state, newMessage) {
      state.message = newMessage
    }
  },
  actions: {
    updateMessage({ commit }, newMessage) {
      commit('UPDATE_MESSAGE', newMessage)
    }
  }
})

export default store

<template>
  <child-component />
</template>

<script>
import store from './store'

export default {
  methods: {
    sendMessage() {
      store.dispatch('updateMessage', 'Hello from child component!')
    }
  }
}
</script>

<template>
  <p>{{ message }}</p>
</template>

<script>
import store from './store'

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