Vue.js 中传递参数的多种方法

在 Vue.js 中传递参数有多种方式，具体取决于你要传递的类型和场景。下面列举了一些常见的方式：

props

可以使用 props 在父组件和子组件之间传递数据。在父组件中定义 props 属性，并将其传递给子组件，子组件可以通过 props 属性访问这些数据。示例代码：

父组件：

<template>
  <div>
    <child-component :message='hello'></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  name: 'ParentComponent',
  components: {
    ChildComponent
  },
  data() {
    return {
      hello: 'Hello, world!'
    }
  }
}
</script>

子组件：

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

<script>
 export default {
  name: 'ChildComponent',
  props: {
    message: String
  }
}
</script>

$emit

可以使用 $emit 方法在子组件和父组件之间传递数据。在子组件中使用 $emit 方法触发一个自定义事件，并将数据作为参数传递给父组件。父组件可以在模板中监听这个事件，并在回调函数中处理数据。示例代码：

父组件：

<template>
  <div>
    <child-component @message='handleMessage'></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  name: 'ParentComponent',
  components: {
    ChildComponent
  },
  methods: {
    handleMessage(message) {
      console.log(message)
    }
  }
}
</script>

子组件：

<template>
  <button @click='sendMessage'>Send message</button>
</template>

<script>
 export default {
  name: 'ChildComponent',
  methods: {
    sendMessage() {
      this.$emit('message', 'Hello, world!')
    }
  }
}
</script>

Vuex

可以使用 Vuex 在任何组件之间共享数据。Vuex 是一个状态管理库，它将所有的状态存储在一个全局的 store 中，并提供了一些 API 来访问和修改这些状态。组件可以通过调用 Vuex 的 API 来获取和修改状态。示例代码：

store.js：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    message: 'Hello, world!'
  },
  mutations: {
    setMessage(state, message) {
      state.message = message
    }
  },
  actions: {
    updateMessage({ commit }, message) {
      commit('setMessage', message)
    }
  }
})

父组件：

<template>
  <div>
    <child-component :message='message' @update-message='updateMessage'></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'
import { mapState, mapActions } from 'vuex'

export default {
  name: 'ParentComponent',
  components: {
    ChildComponent
  },
  computed: {
    ...mapState(['message'])
  },
  methods: {
    ...mapActions(['updateMessage'])
  }
}
</script>

子组件：

<template>
  <div>
    <div>{{ message }}</div>
    <button @click='updateMessage'>Update message</button>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'

export default {
  name: 'ChildComponent',
  computed: {
    ...mapState(['message'])
  },
  methods: {
    ...mapActions(['updateMessage'])
  }
}
</script>

以上就是几种常见的 Vue 传递参数的方式，根据具体场景选择合适的方式。