1. 父向子组件通信

1.1 props

props是最常用的方式。

// 父
<template>
    <child-component1 :name="name"></child-component1>
</template>
<script>
import ChildComponent1 from '@/components/ChildComponent1.vue'
export default { 
  components: { 
    ChildComponent1
  },
  data () { 
    return { 
      name: '小明'
    }
  },
}
</script>
// 子
<template>
    <div>姓名：{ {  name }}</div>
</template>
<script>
export default { 
    props: { 
      name: { 
        type: String, // String、Number、Boolean、Array、Object、Date、Function、Symbol
        default: '', // 默认值
        required: true, // 定义该 prop 是否是必填项。如果为true未传值则会抛出警告
        validator：Function, // 自定义验证参数，如果函数返回false则会抛出警告
      }
    },
}
</script>

props简单语法

props: ['name']

props只定义字符串类型

props: { 
   name: String
}

props如果参数为多类型

props: { 
   name: ['String', 'Number']
}

1.2 ref

这种方式比较少用到。

// 父
<template>
  <div class="page">
    <child-component1 :name="name" ref="cp"></child-component1>
  </div>
</template>
<script>
import ChildComponent1 from '@/components/ChildComponent1.vue'
export default { 
  components: { 
    ChildComponent1
  },
  data () { 
    return { 
      name: '小明'
    }
  },
  mounted () { 
    this.$refs.cp.age = 18
  }
}
</script>
// 子
<template>
  <div class="container">
    <div>姓名：{ {  name }}</div>
    <div>年龄：{ {  age }}</div>
  </div>
</template>
<script>
export default { 
  props: { 
    name: { 
      type: String,
      default: ''
    }
  },
  data () { 
    return { 
      age: 0
    }
  }
}
</script>

1.3 children

通过父组件的children拿到实例，children里是父组件中子组件的集合，官方文档说了不保证里面的顺序。

this.$children[0].age = 30

2. 子向父组件通信

2.1 emit

通过子组件派发事件，父组件监听事件来传值。

// 父
<template>
  <div class="page">
    <child-component1 @onChildComponen="onChildComponen"></child-component1>
  </div>
</template>
<script>
import ChildComponent1 from '@/components/ChildComponent1.vue'
export default { 
  components: { 
    ChildComponent1
  },
  methods: { 
    onChildComponen (data) { 
      alert(data)
    }
  }
}
</script>
// 子
<template>
  <div class="container">
    <div @click="onClick">emit</div>
  </div>
</template>
<script>
export default { 
  methods: { 
    onClick () { 
      this.$emit('onChildComponen', 1)
    }
  }
}
</script>

3 子向子组件通信

他们需要有一个共同的父组件，通过$parent.$emit来派发事件，再通过$parent.$on监听事件

3.1 parent

// 父
<template>
  <div class="page">
    <child-component1 ></child-component1>
    <child-component2 ></child-component2>
  </div>
</template>
<script>
import ChildComponent1 from '@/components/ChildComponent1.vue'
import ChildComponent2 from '@/components/ChildComponent2.vue'
export default { 
  components: { 
    ChildComponent1,
    ChildComponent2
  }
}
</script>
// 子1
<template>
  <div class="container">
    <div @click="onClick">子组件1</div>
  </div>
</template>
<script>
export default { 
  created () { 
  },
  methods: { 
    onClick () { 
      this.$parent.$emit('hi', '你好')
    }
  }
}
</script>
// 子2
<template>
  <div class="container">
    <div>子组件2</div>
  </div>
</template>
<script>
export default { 
  created () { 
    this.$parent.$on('hi', (data) => { 
      alert(data)
    })
  },
  methods: { }
}
</script>

4 父向孙传值

4.1 provide inject

当组件层级过多的时候使用。
父组件提供provide，其他组件通过inject获得值，常用于组件库的发开。

// 父
provide() { 
    return { 
        name: '小明'
    }
}
// 子
inject: ['name']

5 任意两个组件之间

5.1 eventBus

通过eventBus的方式，引用相同的bus来通信

// bus.js
import Vue from 'vue'
const Bus = new Vue()
export default Bus
// 组件1
<template>
  <div class="container">
    <div @click="onClick">子组件1</div>
  </div>
</template>
<script>
import Bus from '@/bus.js'
export default { 
  created () { 
  },
  methods: { 
    onClick () { 
      Bus.$emit('hi', '你好')
    }
  }
}
</script>