父子组件之间的信息通信

图片来自vue.js官网
父组件通过 props 向下传递数据给子组件，子组件通过 events 给父组件发送消息

1.子组件向父组件传递数据

---

①向子组件传递number属性，并把父组件传给子组件的number渲染到子组件中。
父组件：

<template>
  <div id="app">
    <component-a number=5></component-a>   //number属性
  </div>
</template>

<script>
import componentA from './components/a'
import Vue from 'vue'
export default {
  components: {
    componentA: componentA             //子组件声明
  }
}
</script>

子组件：

<script>
export default {
  props: ['number'],           //通过props选项声明子组件接受的属性
  data () {                    //number就会变成子组件的属性，与在data中的声明一样。
    return {
      Hello: 'I am a component a'
    }
  }
}
</script>

<template>
    <div>
        {{ Hello }}
        {{ number }}           //声明过后，number就可以渲染到子组件中了
    </div>
</template>                   //I am a component a 5

---

②插槽功能<slot></slot>，父组件向子组件特定位置传递模板
父组件 App.vue

<com-a @my-event="getMyEvent">
       <p slot="header">给子组件header传递p</p>
       <span slot="footer">给子组件footer传递span</span>
</com-a>

子组件 a.vue 使用<slot></slot>接收来自父组件的模板

<div>
   {{ Hello }}
    <slot name="header"></slot>
    <hr>
    <slot name="footer"></slot>
</div>

---

2.自组件向外传递事件
子组件 a.vue
<button @click="emitMyEvent">emit</button> //当点击emit这个按钮后触发emitMyEvent函数

<script>
export default {
  data () {
    return {
      Hello: 'I am a component a'
    }
  },
  methods: {
    emitMyEvent () {
      this.$emit('my-event', this.Hello)  //emitMyEvent函数触发my-event事件，并传给了Hello这个参数。
    }
  }
}
</script>

父组件 App.vue
<com-a @my-event="getMyEvent"></com-a> //监听自定义事件，当触发了my-event事件的时候，执行getMyEvent函数。

<script>
import comA from './components/a'
export default {
  components: {
    comA
  },
  methods: {
    getMyEvent (hello) {
      console.log('i got my event' + hello) 
     //控制台输出 i got my eventI am a component a
    }
  }
}
</script>