Vue：父子组件如何利用props和$emit通信

父组件向子组件传值——利用props

• 子组件怎么接收？
  通过子组件内部的props接收父组件传递过来的值，可以在模板中使用
  注意：如果props使用驼峰式命名，则父组件传值的属性需使用短横线。因为HTML 中的 attribute 名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。

<template>
  <div>{{msg}}:{{title}}</div> 
</template>

<script>
export default {
	//props接收父组件传递过来的值
    props: ['title'],
    data () {
        return {
            msg: '子组件'
        }
    }
}
</script>

• 父组件怎么传值？
  父组件通过属性传值给子组件（可动态绑定属性）
  注意：属性不能用驼峰式命名，可以用短横线方式命名。

<template>
  <div>
      {{msg}}
      <!-- 父组件通过动态绑定属性传值给子组件 -->
      <B :title="title"></B>
  </div>
</template>

<script>
import B from './B.vue'
export default {
    data () {
        return {
            msg: '父组件',
            title: '父组件传值的内容'
        }
    },
    components: {
        B
    }
}
</script>

props传递数据原则：单向数据流

所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。防止从子组件意外变更父级组件的状态。

子组件向父组件传值——利用$emit

关于$emit

$emit ( ‘自定义事件名’，‘附加参数’ )：触发当前事件。

触发当前实例上的事件,附加参数都会传给监听器回调。 触发的事件名需要完全匹配监听这个事件所用的名称.

注意：推荐始终使用驼峰式的事件名

• 子组件如何向父组件传值？
  子组件通过自定义事件向父组件传值

<template>
    <div>
        <p>{{msg}}</p>
        <button @click="$emit('enlarge-text', 5)">扩大父组件中的字体大小</button>
    </div> 
</template>

• 父组件如何处理并接收值？
  父组件监听子组件的事件，并通过$event接收信息

<template>
  <div>
      <div :style="{fontSize: fontSize + 'px'}">{{msg}}</div>
      <!-- 父组件监听子组件的事件，并通过$event接收信息 -->
      <B @enlarge-text="handle($event)"></B>
  </div>
</template>

<script>
import B from './B.vue'
export default {
    data () {
        return {
            msg: '父组件',
            title: '父组件传值的内容',
            fontSize: 10
        }
    },
    methods: {
        handle(val) {
            // 扩大字体大小
            this.fontSize += val
        }
    },
    components: {
        B
    }
}
</script>