vue父子组件的种通信方式

组件关系

A，B、A，C、B，D、C，E父子组件，B，C兄弟组件，A，D、A，E隔代关系，D，E堂兄关系

• 父子组件之间的通信
• 非父子组件之间的通信

一、props/$emit

  1.父组件向子组件传值

//父组件
<template>
  <div class="section">
    <com-flower :flower="flowerList"></com-flower> //:flower用来传递数据给子组件
  </div>
</template>

<script>
import comFlower from './test/flower.vue'
export default {
  name: 'Home',
  components: { comFlower },
  data() {
    return {
      flowerList: ['菊花', '兰花', '梅花']
    }
  }
}
</script>

//子组件
<template>
  <div>
    <span v-for="(item, index) in flower" :key="index">{
  {item}}</span>
  </div>
</template>

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

props是单向传递，父组件通过v-bind绑定数据到html，子组件中用props