父子组件的单向通信

vue经典例子：

引用script标签的使用

<div id="parent">
  <child v-bind:my-message="parentMsg"></child>
</div>
<script>
  Vue.component('child', {
    // camelCase in JavaScript
    props: ['myMessage'],
    template: '<span>{{ myMessage }}</span>'
  })

  new Vue({
    el: '#parent',
    data: {
        myMessage: 123
    }
</script>

1.父组件向子组件单向输出通过在html的子组件标签上使用绑定属性的形式传递，属性需要v-bind；
2.子组件的script中，使用props属性接收父组件传递过来的属性，props属性是个数组，元素即是传递属性的名字；
3.在父组件的html使用绑定的子组件属性名，接入使用 - 形式的属性名，在子组件的script中要转成驼峰法的名字；

在脚手架中的使用（vue-cli）

• 父组件

// parent.vue
<template>
  <div class="parent">
    <v-child :message="msg"></v-child>
  </div>
</template>
<script>
import child from 'child'
export default {
  data() {
    msg: 'i am isaac!'
  },
  componemts: {
    'v-child': child  
  }
}
</script>

• 子组件

// child.vue
<template>
  <div class="child">
    <p>{{ message }}</p>
  </div>
</template>
<script>
import child from 'child'
export default {
  props: ['message']
}
</script>