【Vue】组件传值的六种方法

Vue 组件之间的通信大概归类为：

父子组件通信: props/$emit；ref/refs；$attrs / $listeners；$parent / $children兄弟组件通信:eventBus；vuex跨级通信:eventBus；Vuex；$attrs / $listeners一、props/$emit（父子组件通信）
1.父组件向子组件传值
通过 props 传值。
父组件的代码：

<template>
  <div class="section">
    <child :list="list"></child>
  </div>
</template>
<script>
import child from './child.vue'
export default {
   
  components: {
    child },
  data() {
   
    return {
   
      list: ['a1', 'b2', 'c3']
    }
  }
}
</script>

子组件的代码(即 child.vue)：

<template>
  <div>
    <span v-for="(item, index) in list" :key="index">{
   {
   item}}</span>
  </div>
</template>
<script>
export default {
   
  props: ['list'],
}
</script>

2.子组件向父组件传值
$emit 绑定一个自定义事件, 当这个语句被执行时, 就会将参数 arg 传递给父组件,父组件通过 v-on 监听并接收参数。

父组件的代码：

<template>
  <div class="section">
    <child :list="list"  @onEmitIndex="onEmitIndex"></child>
    <p>{
   {
   item}} => {
   {
   currentIndex}}</p