vue 组件传参 详解

一、父子组件传值

在项目里，每个组件都是独立的，那么在进行调用的时候，该如何向子组件进行参数的传递呢？

方法一、

关键词：props、$emit

父组件向子组件进行传值

如图所示为父组件，黄色框里是编写需要传递的参数；蓝色框里是为了在父组件里使用子组件而进行的声明；红色框里是为关键。:parentMsg="msg"parentMsg是一个传递参数的变量名，可随意编写。前面接一个冒号是v-bind的简写，目的是为了将parentMsg 与data里的一个msg参数绑定，传递的值始终是所绑定的msg的值

子组件接收父组件传递的值

如图所示为子组件，子组件需使用 props 来接收父组件所传递的值。红色框里的props的值是为一个数组，意味着可接受多个参数的传递。而 parentMsg 是在父组件里定义传递参数的名字，需要注意与父组件里定义的名字保持一致。黄色框里就是将父组件传递过来的值进行展示，需注意的是 双花括号 。

总结，父组件通过 v-bind 来绑定data里的一个参数，用以向子组件进行数据的传递。子组件需要使用 props 来接收父组件向子组件传递的参数。

子组件向父组件传值

如图所示为子组件内容，红色框框里为执行条件，当点击按钮时就会触发蓝色框框里的 tofather 方法，当 tofather 方法被执行时，就会抛发绿色框框里的 fromChild 方法，此方法是定义在父组件里，稍后会有解释。并且将灰色框框里的data的值传递给父组件.
this.$emit(event,arg)
event 就是定义在父组件里的一个方法，此处是将其进行抛发.
arg 就是想要将子组件的一些内容传递给父组件.

此方法还能用于兄弟组件之间进行传值.

需要强调的是 $emit传入的事件名称只能使用小写，不能使用大写的驼峰规则命名。在这里插入图片描述

父组件接收子组件的参数

如图所示为父组件，蓝色框框里是预先定义好的变量，当子组件传递过来值时，将赋值给此变量用以动态显示，显示的模块就是绿色框框里的内容，注意双花括号！ 红色框框里的 @fromChild 就是自定义了一个方法，当此方法被触发时会执行黄色框框里的 father方法。在子组件里抛发了一个 fromChild 方法，此方法就是触发 @fromChild,从而将执行father方法，目的是将子组件传递的值赋值给data里的参数，用以动态显示。方法father里的res参数就是子组件里灰色框框里的值。

方法二

关键词：独立的事件中心 eventHub

首先需要先创建 eventHub.js 文件，代码如下：

// 将在各处使用该事件中心
// 组件通过它来通信
import Vue from 'vue'
export default new Vue()

然后在组件中，可以使用emit, on, $off 分别来分发、监听、取消监听事件。

父组件 FatherComponent 代码：

<template>
  <div>
    <div>{{info}}</div>
    <ChildComponent />
    <BrotherComponent />
    <button @click="toChild">传递给子组件</button>
  </div>
</template>

<script>
  import eventHub from '../../components/test/eventHub'
  import ChildComponent from 'components/test/child-component'
  import BrotherComponent from 'components/test/brother-component'

  export default {
    components: {
      ChildComponent,
      BrotherComponent
    },
    data () {
      return {
        info: ''
      }
    },
    created: function () {
      eventHub.$on('toFather', this.toFather)
    },
    // 最好在组件销毁前
    // 清除事件监听
    beforeDestroy: function () {
      eventHub.$off('toFather', this.toFather)
    },
    methods: {
      toFather (res) {
        this.info = res
      },
      toChild () {
        eventHub.$emit('toChild', 'I am your father.')
      }
    }
  }
</script>

<style lang="less">
  button {
    font-size: 36px;
    border: none;
    padding: 20px;
    background-color: #999;
    color: #fff;
    width: 100%;
    margin-top: 30px;
  }
</style>

子组件 ChildComponent 代码：

<template>
  <div>
    <div>{{info}}</div>
    <button @click="toFather">传递给父组件</button>
    <button @click="toBrother">传递给兄弟组件</button>
  </div>
</template>

<script>
  import eventHub from './eventHub'
  export default {
    data () {
      return {
        info: ''
      }
    },
    created: function () {
      eventHub.$on('toChild', this.toChild)
    },
    // 最好在组件销毁前
    // 清除事件监听
    beforeDestroy: function () {
      eventHub.$off('toChild', this.toChild)
    },
    methods: {
      toChild (res) {
        this.info = res
      },
      toFather () {
        eventHub.$emit('toFather', 'I am your child.')
      },
      toBrother () {
        eventHub.$emit('toBrother', 'I am your brother.')
      }
    }
  }
</script>

<style lang="less">
</style>

兄弟组件 BrotherComponent 代码：

<template>
  <div>{{info}}</div>
</template>

<script>
  import eventHub from './eventHub'
  export default {
    data () {
      return {
        info: ''
      }
    },
    created: function () {
      eventHub.$on('toBrother', this.toBrother)
    },
    // 最好在组件销毁前
    // 清除事件监听
    beforeDestroy: function () {
      eventHub.$off('toBrother', this.toBrother)
    },
    methods: {
      toBrother (res) {
        this.info = res
      }
    }
  }
</script>

<style lang="less">
</style>

方法三

关键词：Vuex

关于Vuex，我会有一个详细的介绍。链接稍后会贴在下面 vuex