Vue文档中的组件传值举例分析

<template>
  <div>
    <h2>父组件</h2>
    <p>我是父组件的信息：{{parentInfo}}</p>
    <child :childInfo="parentInfo"></child>
  </div>
</template>

<script>
import Child from './child.vue'
export default {
  name: 'Parent',
  components: {
    Child
  },
  data() {
    return {
      parentInfo: '我是来自父组件的信息'
    }
  }
}
</script>

<template>
  <div>
    <h2>子组件</h2>
    <p>我是子组件的信息: {{childInfo}}</p>
  </div>
</template>

<script>
export default {
  name: 'Child',
  props: ['childInfo']
}
</script>

<template>
  <div>
    <h2>组件间事件通信示例</h2>
    <child></child>
    <grand-child></grand-child>
  </div>
</template>

<script>
import Vue from 'vue'
import Child from './child.vue'
import GrandChild from './grandChild.vue'

export default {
  name: 'Event',
  components: {
    Child,
    GrandChild
  },
  created() {
    //使用$on监听来自子组件的事件
    this.$on('sendMsg', function(message) {
      console.log('父组件接收到来自子组件的消息：' + message)
    })
  }
}
</script>

<template>
  <div>
    <h3>子组件</h3>
    <button @click="handleClick">发送消息</button>
  </div>
</template>

<script>
export default {
  name: 'Child',
  methods: {
    handleClick() {
      //使用$emit发送事件
      this.$emit('sendMsg', '我是来自子组件的信息')
    }
  }
}
</script>