vue 中几种传值方法(3种)

当我们在 Vue 中需要进行组件间的数据传递时，就需要使用到一些传值方法。下面将从 props、emit 和 vuex 三个方面分别介绍 Vue 中三种传值方法。

1. props

props 是 Vue 中组件间传值最常用的方法之一。它可以实现父组件向子组件传值，在子组件中可以直接使用 props 来访问。

1.1. 定义props

在父组件中定义 props，示例代码如下：

<template>
  <child :msg="message"></child>
</template>
<script>
import Child from './Child.vue'
export default {
  components:{
    Child
  },
  data() {
    return {
      message: 'Hello Vue!'
    }
  }
}
</script>

在子组件中使用 props，示例代码如下：

<template>
  <h1>{{ msg }}</h1>
</template>
<script>
export default {
  props: ['msg']
}
</script>

1.2. 使用props

1. 在父组件中将所需的数据传入子组件。

<template>
  <child :msg="message"></child>
</template>
<script>
import Child from './Child.vue'
export default {
  components:{
    Child
  },
  data() {
    return {
      message: 'Hello Vue!'
    }
  }
}
</script>

1. 在子组件中使用 props。

<template>
  <h1>{{ msg }}</h1>
</template>
<script>
export default {
  props: ['msg']
}
</script>

2. emit

emit 是 Vue 中子组件向父组件传值的方法，它可以在子组件中通过 emit 方法将数据传递给父组件。

2.1. 定义emit

在子组件中定义 emit，在这个例子中，我们传递一个字符串数据：

<template>
  <h1 @click="clickHandler">{{ message }}</h1>
</template>
<script>
export default {
  data() {
    return {
      message: 'Hello Vue!'
    }
  },
  methods: {
    clickHandler() {
      this.$emit('click-event', 'Hello Parent Component!')
    }
  }
}
</script>

2.2. 使用emit

1. 在父组件中调用 emit 方法，并接收子组件传递的数据。

<template>
  <child @click-event="showData"></child>
</template>
<script>
import Child from './Child.vue'
export default {
  components: {
    Child
  },
  methods: {
    showData(data) {
      console.log(data)
    }
  }
}
</script>

1. 在子组件中通过 emit 方法将数据传递给父组件。

<template>
  <h1 @click="clickHandler">{{ message }}</h1>
</template>
<script>
export default {
  data() {
    return {
      message: 'Hello Vue!'
    }
  },
  methods: {
    clickHandler() {
      this.$emit('click-event', 'Hello Parent Component!')
    }
  }
}
</script>

3. vuex

vuex 是 Vue.js 中一种状态管理模式，用于在多个组件之间共享状态。通常情况下我们可以使用 props 和 emit 来进行父子组件之间的数据传递，但是当组件之间的关系变得更加复杂时，就需要使用 vuex 来进行管理了。

3.1. 定义vuex

将所有的需要共享的状态放在 Vuex 的 store 中进行管理：

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

Vue.use(Vuex)

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

3.2. 使用vuex

1. 在需要使用 state 的组件中引入 Vuex 并使用 mapState 将 state 映射到组件计算属性中。

<template>
  <div>
      <h1>{{ message }}</h1>
      <button @click="increment">增加</button>
  </div>
</template>
<script>
import { mapState, mapMutations } from 'vuex'
export default {
  computed: mapState({
    message: state => `现在的数值是${state.count}`
  }),
  methods: mapMutations([
    'increment'
  ])
}
</script>

1. 在使用 state 的组件中使用方法来改变 state 中的数据。

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="increment">增加</button>
  </div>
</template>
<script>
import { mapState, mapMutations } from 'vuex'
export default {
  computed: mapState({
    message: state => `现在的数值是${state.count}`
  }),
  methods: mapMutations([
    'increment'
  ])
}
</script>

以上就是 Vue 中的三种传值方法：props、emit 和 vuex。当组件关系相对简单时可以使用 props 和 emit 进行传递数据，当组件之间的关系变得更加复杂时，可以使用 vuex 进行状态管理。