Vue组件间数据的传递

• 通过 Prop 向子组件传递数据

// 父组件
<Child :message='123'></Child> // 绑定一个属性

<!--子组件-->
<template>
    <div>
        <h2>{{msg}}</h2>
        <span>{{ message }}</span> <!--展示接收属性的值-->
    </div>    
</template>
<script>
    export default {
        name: 'child',
        props: ['message'], // 接收message属性
        data(){
            return {
                msg:'这是子组件'
            }
        }
    }
</script>

• 通过事件向父组件发送消息

<!--子组件-->
<template>
    <div>
        <h2>{{msg}}</h2>
         <!--点击事件，通过 $emit 方法传入事件的名字，向父组件出发一个事件-->
        <span v-on:click="$emit('enlarge'，1)">{{ message }}</span>
    </div>    
</template>
<script>
    export default {
        name: 'child',
        props: ['message'],// 接收message属性
        data(){
            return {
                msg:'这是子组件'
            }
        }
    }
</script>

<!--父组件-->
<template>
  <div class="hello" >
    <div >
      <h1>{{ msg }}--{{postFontSize}}</h1>
      <!--v-on 监听这个事件，实现对父组件数据的改变-->
      <Child v-on:enlarge="postFontSize+=$event" :message='123'></Child>     
    </div>
  </div>
</template>

<script>
import Child from '@/components/Child'
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: '这是父组件',
      postFontSize: 1
    }
  },
  components: {
    Child
  }
}
</script>