Vue中的父子组件传值，给你的项目加速

2023-11-14 23:19:28

前言

在Vue.js中，组件是构建用户界面的基本单元。父子组件通信是组件间数据传递的一种重要方式。本文将详细介绍父子组件通信的各种方法，包括props、emit和Vuex，并提供示例代码，帮助您快速掌握父子组件通信技巧，让您的项目开发如虎添翼。

props：从父组件向子组件传递数据

props是Vue.js中父子组件通信最基本的方式。它允许父组件将数据传递给子组件。子组件通过props来接收父组件传递的数据。

使用props传递数据

在父组件中，可以使用props属性来定义要传递给子组件的数据。props属性是一个对象，键名是传递给子组件的数据的名称，键值是传递给子组件的数据的值。

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

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue.js!'
    }
  }
}
</script>

在子组件中，可以使用props属性来接收父组件传递的数据。props属性是一个对象，键名是接收父组件传递的数据的名称，键值是接收父组件传递的数据的值。

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

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

emit：从子组件向父组件传递数据

emit是Vue.js中父子组件通信的另一种方式。它允许子组件向父组件传递数据。父组件通过emit事件来监听子组件传递的数据。

使用emit传递数据

在子组件中，可以使用emit方法来触发一个事件，并将数据传递给父组件。emit方法接受两个参数，第一个参数是事件的名称，第二个参数是传递给父组件的数据。

<template>
  <div>
    <button @click="handleClick">Click me</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick() {
      this.$emit('click', 'Hello, Vue.js!')
    }
  }
}
</script>

在父组件中，可以使用@事件监听器来监听子组件触发的事件。@事件监听器接受两个参数，第一个参数是事件的名称，第二个参数是事件处理函数。

<template>
  <div>
    <child-component @click="handleClick" />
  </div>
</template>

<script>
export default {
  methods: {
    handleClick(message) {
      console.log(message)
    }
  }
}
</script>

Vuex：集中管理组件间的数据

Vuex是一个集中管理组件间数据的状态管理工具。它允许组件通过一个全局的store来共享数据。

使用Vuex传递数据

在父组件中，可以使用Vuex的mapState方法来将store中的数据映射到组件的data属性。

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

<script>
import { mapState } from 'vuex'

export default {
  computed: {
    ...mapState(['message'])
  }
}
</script>

在子组件中，可以使用Vuex的mapActions方法来将store中的动作映射到组件的methods属性。

<template>
  <div>
    <button @click="handleClick">Click me</button>
  </div>
</template>

<script>
import { mapActions } from 'vuex'

export default {
  methods: {
    ...mapActions(['handleClick'])
  }
}
</script>