Vue 组件间进行传值

1. 父组件向子组件传值

props 最为常用的一种

父组件中：

第一个msg自定义，随意命名，父组件用什么名字传，子组件就用什么名字来接。

第二个msg为需要传递的数据。

<Test :msg="msg"/>

子组件中：

定义一个props来接收，两种方式都可以。对象形式的需要传入数据的数据类型。

<template>
  <div>
    <h1>这是子组件 _{{ msg }}</h1>
  </div>
</template>
<script>
export default {
//第一种接收方式
  props: {
    msg: String
  }
//第二种接收方式
  props: ['msg']
}
</script>

2. 子组件向父组件传值

$emit

子组件中：

通过 $emit 传入两个参数，第一个是自定义事件名，第二个是需要传走的值

<template>
  <div>
    <h1 @click="emitCount">这是子组件 _{{ msg }}+{{ count }}</h1>
  </div>
</template>
<script>
export default {
  data() {
    return {
      count: 0
    }
  },
  props: ['msg'],
  methods: {
    emitCount() {
      this.$emit('emit', this.count)
    }
  }
}
</script>

父组件中：

在组件中通过一个函数来接收，自组件传递过来的值作为这个函数的参数来接收。

<Test :msg="msg" @emit="getEmitVal"></Test>

<script>
import Test from '../components/Test.vue';
export default {
  data() {
    return {
      msg: '传输的数据',
      emitVal: 0,
    }
  },
  components: {
    Test,
  },
  methods: {
    getEmitVal(val) {
      console.log('emit:::::', val);
      this.emitVal = val
    }
  }

}
</script>

3. 兄弟组件间传值

通过一个共同的中转站bus来进行传递，这个bus文件内只有两行：

import Vue from 'vue'
export default new Vue()

A组件内（传值方）：

引入eventbus，传数据一方使用 .$emit，第一个参数为自定义的事件名，第二个参数为需要传递的数据

<template>
  <div>
    <h1 @click="toBro">这是子组件test</h1>
  </div>
</template>
<script>
import eventbus from '../utils/bus';

export default {
  data() {
    return {
      msg: 'test的数据'
    }
  },
  methods: {
    toBro() {
      eventbus.$emit('emitMsg', this.msg)
    }
  }
}
</script>

B组件内（接收方）：

同样需要引入eventbus，使用 .$on来接收数据，第一个参数名为 发送数据时定义的名字，第二个参数为一个参数，函数的参数就是需要接收的值。

<template>
  <div>
    <h1>这是子组件tests{{ getVal }}</h1>
  </div>
</template>
<script>
import eventbus from '../utils/bus';

export default {
  data() {
    return {
      getVal: ''
    }
  },
  mounted() {
    eventbus.$on('emitMsg', (res) => {
      this.getVal = res
    })
  }
}
</script>