Vue组件传值的五种方法

Vue.js是一款流行的前端JavaScript框架，它是基于组件化思想构建的。组件作为页面上的一部分，可以接收和发送数据。在Vue.js中，组件传值的方式可以使用以下五种方法。

一、Props传值

Props是Vue.js中父组件向子组件传值的一种方法。它通过在子组件上绑定属性名，再在父组件中通过该属性名传值，完成父子组件间的数据通信。

// 子组件
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

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

// 父组件
<template>
  <div>
    <child-component :message="propMessage"></child-component>
  </div>
</template>

<script>
  import ChildComponent from 'child-component.vue'

  export default {
    components: {
      ChildComponent
    },
    data () {
      return {
        propMessage: 'Hello, Vue Props!'
      }
    }
  }
</script>

上面的代码中，子组件通过props属性定义了一个属性message，用于接收来自父组件传递的数据。在父组件中，通过<child-component :message=”propMessage”></child-component>指令将父组件的data中的propMessage传递给子组件。在子组件中，通过<p>{{ message }}</p>语法输出来自父组件的数据。

二、Vuex状态管理传值

Vuex是Vue.js的一种状态管理模式，它可以帮助我们管理组件的共享状态。在Vuex中，使用state来管理组件的状态，使用mutation来定义修改state的方法，使用getters来获取state的值。

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

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    message: 'Hello, Vuex!'
  },
  mutations: {
    updateMessage (state, newMessage) {
      state.message = newMessage
    }
  },
  getters: {
    getMessage (state) {
      return state.message
    }
  }
})

export default store

// 子组件
<template>
  <div>
    <p>{{ message }}</p>
    <button @click="updateMessage">Update Message</button>
  </div>
</template>

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

  export default {
    computed: {
      ...mapState(['message']),
      ...mapGetters(['getMessage'])
    },
    methods: {
      ...mapMutations(['updateMessage'])
    }
  }
</script>

// 父组件
<template>
  <div>
    <child-component />
  </div>
</template>

<script>
  import ChildComponent from 'child-component.vue'
  import store from 'store.js'

  export default {
    components: {
      ChildComponent
    },
    store
  }
</script>

上面的代码中，通过Vuex将子组件和父组件连接起来。子组件中展示了来自Vuex的message状态值，并定义了一个updateMessage方法用于更新message的值。在父组件中，将store配置到Vue实例中，并在<child-component />中使用子组件。

三、$emit传值

$emit是Vue.js中子组件向父组件传递数据的一种方式。子组件使用$emit方法，向父组件触发自定义事件，并传递需要传递的数据。

// 子组件
<template>
  <div>
    <button @click="$emit('update', 'Hello, Vue $emit!')">Update Message</button>
  </div>
</template>

// 父组件
<template>
  <div>
    <child-component @update="handleUpdate"></child-component>
  </div>

  <script>
    import ChildComponent from 'child-component.vue'

    export default {
      components: {
        ChildComponent
      },
      methods: {
        handleUpdate (message) {
          console.log(message)  // 输出 "Hello, Vue $emit!"
        }
      }
    }
  </script>

上面的代码中，子组件中通过<button @click=”$emit(‘update’, ‘Hello, Vue $emit!’)”>Update Message</button>语法触发了父组件中的自定义事件update，并向父组件传递了数据”Hello, Vue $emit!”。父组件中通过"update"事件接收到子组件传递的数据，并执行handleUpdate方法对数据处理。

四、provide / inject传值

在Vue.js中，provide用于注入信息，inject用于获取provide中的信息。provide和inject组合起来，可以实现父组件向多级子组件传递数据的功能。

// 子组件1
<template>
  <div>
    <p>{{ message }}</p>
  </div>
<template>

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

// 子组件2
<template>
  <div>
    <child-component1 />
  </div>
</template>

<script>
  import ChildComponent1 from 'child-component1.vue'

  export default {
    components: {
      ChildComponent1
    }
  }
</script>

// 父组件
<template>
  <div>
    <child-component2 :message="parentMessage" />
  </div>
</template>

<script>
  import ChildComponent2 from 'child-component2.vue'

  export default {
    components: {
      ChildComponent2
    },
    provide () {
      return {
        message: 'Hello, Vue provide / inject!'
      }
    },
    data () {
      return {
        parentMessage: 'Hello, Vue parentMessage!'
      }
    }
  }
</script>

上面的代码中，父组件通过<child-component2 :message=”parentMessage” />向子组件2传递了parentMessage数据，子组件2通过provide返回message数据。子组件1通过inject获取到了message数据，并渲染出”Hello, Vue provide / inject!”的值。

五、$parent和$children传值

$parent和$children使我们可以在父子组件中获取到实例，进而实现父子间传值的功能。

// 父组件
<template>
  <div>
    <child-component />
  </div>
</template>

<script>
  import ChildComponent from 'child-component.vue'

  export default {
    components: {
      ChildComponent
    },
    data () {
      return {
        parentMessage: 'Hello, Vue $parent / $children!'
      }
    },
    mounted () {
      this.$children[0].showMessage()
    }
  }
</script>

// 子组件
<template>
  <div>
  </div>
</template>

<script>
  export default {
    methods: {
      showMessage () {
        console.log(this.$parent.parentMessage)  // 输出 "Hello, Vue $parent / $children"
      }
    }
  }
</script>

上面的代码中，父组件中渲染了子组件，父组件的data中定义了一个parentMessage属性，用于传递数据给子组件。在父组件mounted生命周期函数中，通过访问this.$children[0]获取到子组件实例，调用子组件中定义的showMessage方法，在方法中使用this.$parent.parentMessage通过$parent获取到父组件实例，并获取父组件实例中的parentMessage属性值。