VUE组件传参超详细讲解

下面是“VUE组件传参超详细讲解”的完整攻略：

一、组件传参的概述

在Vue中，组件间的通信是一个十分重要的概念。而组件传参是组件通信的核心之一。在Vue中有很多种组件传参的方式，包括：Props、$emit事件等。下面将对这些方式逐一进行详细介绍。

二、Props传参

1. 父组件向子组件传参

使用Props实现父组件向子组件传参。

1. 在父组件中定义要传递的参数：

<!-- 父组件模板 -->
<template>
  <child-component :propA="valueA"></child-component>
</template>

<script>
  export default {
    data() {
      return {
        valueA: '我是传递给子组件的参数'
      }
    },
    ...
  }
</script>

1. 在子组件中使用props接收参数：

<!-- 子组件模板 -->
<template>
  <div>{{propA}}</div>
</template>

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

2. 子组件向父组件传参

父组件除了向子组件传参之外，还可以通过v-on监听子组件触发的事件，实现子组件向父组件传参。

1. 在子组件中使用$emit方法触发事件，并传递参数：

<!-- 子组件模板 -->
<template>
  <button @click="handleClick">点击传递参数</button>
</template>

<script>
  export default {
    methods: {
      handleClick() {
        this.$emit('on-change', '我是要传递的参数')
      }
    },
    ...
  }
</script>

1. 在父组件中使用v-on监听子组件触发的事件：

<!-- 父组件模板 -->
<template>
  <child-component v-on:on-change="handleChange"></child-component>
</template>

<script>
  export default {
    methods: {
      handleChange(param) {
        console.log(param)
      }
    },
    ...
  }
</script>

三、$attrs和$listeners

1. $attrs

在组件之间传递大量的属性和事件时，可能需要把这些属性传递给子组件，但是，这样做可能会对子组件产生一定程度的影响。$attrs 选项是允许将父组件中未被 prop 所识别（且获取 prop 的默认值）的特性绑定到一个非根级别的子组件上的。

<!-- 父组件模板 -->
<template>
  <div>
    <child-component value="父组件定义的 value"></child-component>
  </div>
</template>

<!-- 子组件模板 -->
<template>
  <div>
    <div>{{value}}</div> <!-- 传递来的属性 -->
    <div>{{another}}</div> <!-- 非Prop的属性 -->
  </div>
</template>

<script>
  export default {
    props: ['value'],
    computed: {
      // 获取不是property的属性
      another() {
        return this.$attrs.another
      }
    },
    ...
  }
</script>

2. $listeners

$listeners 选项用于将父组件的事件监听器直接传递给子组件，不需要通过子组件事件传递。

<!-- 父组件模板 -->
<template>
  <div>
    <child-component v-on:click="handleClick"></child-component>
  </div>
</template>

<!-- 子组件模板 -->
<template>
  <button v-on="$listeners">子组件按钮</button>
</template>

<script>
  export default {
    ...
  }
</script>

四、使用vuex传参

Vuex 是一个专门为 Vue.js 应用程序开发的状态管理模式，通过这个模式，我们可以方便的进行组件间传参。

在Vuex中，可以使用store对象来管理应用程序的状态。在store对象中定义state状态、mutations和actions。

1. 在store中定义state状态

// store.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count: 0,
    message: 'Hello Vuex'
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    asyncIncrement ({ commit }) {
      setTimeout(() => {
        commit('increment')
      }, 1000)
    }
  }
})

1. 在组件中使用state、mutations、actions

在需要使用state、mutations、actions的页面中，需要使用mapState、mapMutations、mapActions连接到store中。

<template>
  <div>
    <p>{{count}}</p>
    <button @click="increment">+</button>
    <button @click="asyncIncrement">异步加1</button>
    <p>{{message}}</p>
    <input @input="setMessage" :value="message">
  </div>
</template>

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

export default {
  computed: {
    ...mapState({
      count: state => state.count,
      message: state => state.message
    })
  },
  methods: {
    ...mapMutations([
      'increment'
    ]),
    ...mapActions([
      'asyncIncrement'
    ]),
    setMessage (event) {
      this.$store.commit('setMessage', event.target.value)
    }
  },
  ...
})
</script>

五、总结

本文详细介绍了使用Props、$emit、$attrs、$listeners和Vuex进行组件传参的方法。以上这些方法都有各自的优缺点，在具体的开发场景中，可以根据实际情况选择适用的方法。